@total_onion/onion-library 1.0.3 → 1.0.5

package/components/{block-sub-group-container/sub-group-container.js → block-sub-group-container-v3/sub-group-container-v3.js}

@@ -1,5 +1,5 @@
 // LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
-export default function subgroupcontainerJs(options = {}) {
+export default function subgroupcontainerv3Js(options = {}) {
 	// try {
 	// 	const {block} = options;
 	// 	loadCss(block.dataset.assetkey, options).then(() => {});

package/components/{block-site-title-and-tagline/site-title-and-tagline.php → block-sub-group-container-v3/sub-group-container-v3.php}

@@ -2,8 +2,8 @@
 
 acf_register_block_type(
 	array(
-		'name'            => 'site-title-and-tagline',
-		'title'           => __('Site title and tagline', 'Global-theme Admin'),
+		'name'            => 'sub-group-container-v3',
+		'title'           => __('Sub group container v3', 'Global-theme Admin'),
 		'render_callback' => 'athena_block_render_post_object',
 		'category'        => 'common',
 		'icon'            => get_svg_icon_content('brick.svg'),

package/components/{block-sub-group-container/sub-group-container.scss → block-sub-group-container-v3/sub-group-container-v3.scss}

@@ -3,9 +3,9 @@
 @use 'Assets/scss/modules/library-modules/grid-layout-container/grid-layout-container';
 @use 'Assets/scss/modules/library-modules/responsive-image/responsive-image';
 // @use 'Assets/scss/modules/library-modules/animations/animations';
-@use 'Assets/scss/blocks/sub-group-container/sub-group-container-extra';
+@use 'Assets/scss/blocks/sub-group-container-v3/sub-group-container-v3-extra';
 @use 'Assets/scss/modules/library-modules/cover-link/cover-link';
-.sub-group-container {
+.sub-group-container-v3 {
 	@include responsive-image.responsiveImage();
 	// @include animations.animations();
 	@include cover-link.coverLink();
@@ -22,5 +22,5 @@
 		@include grid-layout-element.gridLayoutElement();
 		z-index: 5;
 	}
-	@include sub-group-container-extra.additionalStyles();
+	@include sub-group-container-v3-extra.additionalStyles();
 }

package/components/{block-sub-group-container/sub-group-container.twig → block-sub-group-container-v3/sub-group-container-v3.twig}

@@ -1,27 +1,23 @@
 {# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
-{% set blockClassName = "sub-group-container" %}
+{% set blockClassName = "sub-group-container-v3" %}
 {% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields, block }, with_context = false) %}
-{% set htmlEntryPoint = include('entry-points/entry-point-html.twig', { fields, block, blockClassName, options, cta_styles, environment, is_preview, nav_menus }, with_context = false) %}
+{% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields, block, blockClassName, options, cta_styles, environment, is_preview, nav_menus }, with_context = false) %}
 {% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields, block }, with_context = false) %}
 {% set styleEntryPoint = include('entry-points/entry-point-style.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
-{% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
 {% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields: fields, block: block, displaytype: displaytype, is_preview: is_preview }, with_context = false) %}
-
 {% set backgroundColour = '--section-background-colour: ' ~ fields.background_colour ~ ';' %}
-
 {% set gridLayoutContainer = include('components/grid-layout-container.twig') %}
 {% set gridGapMults = include('components/grid-gap-mults.twig') %}
 {% set blockElementType = fields.block_element_type|default('section')|ru %}
-
+{% set imageSizes = '(min-width: 1440px) ' ~ (100 / fields.grid_columns_desktop)|round ~ 'vw, (min-width: 1024px) ' ~ (100 / fields.grid_columns_desktop)|round ~ 'vw, (min-width: 768px) ' ~ (100 / fields.grid_columns_portrait)|round ~ 'vw, (min-width: 300px) ' ~(100 / fields.grid_columns_mobile)|round ~ 'vw, 100vw' %}
 {% set sectionStyles =  styleEntryPoint ~ backgroundColour ~ gridGapMults ~ gridLayoutContainer ~ containerOverflowType ~ blockPosition %}
-
 {{previewEntryPoint}}
 <style>
 	.{{blockClassName}}.{{block.id}}{
 		{{sectionStyles}}
 	}
 </style>
-<{{blockElementType}} {{block.anchor ? "id=" ~ block.anchor : ''}} class="sub-group-container {{blockClassName}} {{block.className}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-jsload="false" data-assetkey="sub-group-container">
+<{{blockElementType}} {{block.anchor ? "id=" ~ block.anchor : ''}} class="sub-group-container-v3 {{blockClassName}} {{block.className}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-jsload="false" data-assetkey="sub-group-container-v3">
 	<div class="{{blockClassName}}__grid-container">
 		{% for section in fields.sections %}
 			{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: section, block: block }, with_context = false) %}
@@ -34,7 +30,7 @@
 				}
 			</style>
 			<div class="{{blockClassName}}__block-container {{block.id}}">
-				{{ include('blocks/' ~ (section.acf_fc_layout|replace({ '_': '-' })) ~ '.twig', { fields: section, options, block, is_preview, current, nav_menus, site, cta_styles, market_settings, languages }, with_context = false, ignore_missing = true) }}
+				{{ include('blocks/' ~ (section.acf_fc_layout|replace({ '_': '-' })) ~ '.twig', { fields: section, options, block, is_preview, current, nav_menus, site, cta_styles, market_settings, languages, imageSizes }, with_context = false, ignore_missing = true) }}
 			</div>
 		{% endfor %}
 	</div>

package/components/{block-theme-switcher/group_674e319102e49.json → block-video-content-v3/group_687190b8d26df.json}

@@ -1,10 +1,10 @@
 {
-    "key": "group_674e319102e49",
-    "title": "Block: Theme Switcher",
+    "key": "group_687190b8d26df",
+    "title": "Block: Video Content v3",
     "fields": [
         {
-            "key": "field_674e3250926a4",
-            "label": "Block Padding",
+            "key": "field_687190faf3f3c",
+            "label": "Video",
             "name": "",
             "aria-label": "",
             "type": "tab",
@@ -23,9 +23,9 @@
             "selected": 0
         },
         {
-            "key": "field_674e3238926a3",
-            "label": "Block padding fields",
-            "name": "block_padding_fields",
+            "key": "field_687190baf3f3b",
+            "label": "Video fields",
+            "name": "video_fields",
             "aria-label": "",
             "type": "clone",
             "instructions": "",
@@ -38,7 +38,7 @@
             },
             "wpml_cf_preferences": 3,
             "clone": [
-                "group_638f4148bc10b"
+                "group_6872282f44634"
             ],
             "display": "seamless",
             "layout": "block",
@@ -51,8 +51,8 @@
             "acfe_clone_modal_size": "large"
         },
         {
-            "key": "field_674e3191f1678",
-            "label": "Block Settings",
+            "key": "field_68719139f3f3f",
+            "label": "Block Padding",
             "name": "",
             "aria-label": "",
             "type": "tab",
@@ -71,11 +71,39 @@
             "selected": 0
         },
         {
-            "key": "field_674e31f552b94",
-            "label": "Block",
+            "key": "field_68719142f3f40",
+            "label": "block padding fields",
+            "name": "block_padding_fields",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "clone": [
+                "group_638f4148bc10b"
+            ],
+            "display": "seamless",
+            "layout": "block",
+            "prefix_label": 0,
+            "prefix_name": 0,
+            "acfe_seamless_style": 0,
+            "acfe_clone_modal": 0,
+            "acfe_clone_modal_close": 0,
+            "acfe_clone_modal_button": "",
+            "acfe_clone_modal_size": "large"
+        },
+        {
+            "key": "field_6871910af3f3d",
+            "label": "Block Settings",
             "name": "",
             "aria-label": "",
-            "type": "accordion",
+            "type": "tab",
             "instructions": "",
             "required": 0,
             "conditional_logic": 0,
@@ -85,14 +113,15 @@
                 "id": ""
             },
             "wpml_cf_preferences": 3,
-            "open": 0,
-            "multi_expand": 0,
-            "endpoint": 0
+            "placement": "top",
+            "endpoint": 0,
+            "no_preference": 0,
+            "selected": 0
         },
         {
-            "key": "field_674e320752b96",
-            "label": "Blocks settings fields",
-            "name": "blocks_settings_fields",
+            "key": "field_6871911af3f3e",
+            "label": "block settings fields",
+            "name": "block_settings_fields",
             "aria-label": "",
             "type": "clone",
             "instructions": "",
@@ -116,33 +145,14 @@
             "acfe_clone_modal_close": 0,
             "acfe_clone_modal_button": "",
             "acfe_clone_modal_size": "large"
-        },
-        {
-            "key": "field_674e31ff52b95",
-            "label": "Block end",
-            "name": "",
-            "aria-label": "",
-            "type": "accordion",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "wpml_cf_preferences": 3,
-            "open": 0,
-            "multi_expand": 0,
-            "endpoint": 1
         }
     ],
     "location": [
         [
             {
-                "param": "block",
+                "param": "post_type",
                 "operator": "==",
-                "value": "acf\/theme-switcher"
+                "value": "post"
             }
         ]
     ],
@@ -163,5 +173,5 @@
     "acfe_display_title": "",
     "acfe_meta": "",
     "acfe_note": "",
-    "modified": 1747214303
+    "modified": 1752311923
 }

package/components/block-video-content-v3/video-content-v3.js

@@ -0,0 +1,10 @@
+import videocontroller from '@total_onion/onion-videocontroller/onion-videocontroller.js';
+
+export default function videocontentv3Js ( options = {} ) {
+	try {
+		const { block } = options;
+		const videoController = new videocontroller(block);
+	} catch ( error ) {
+		console.error( error );
+	}
+}

package/components/{block-responsive-table/responsive-table.php → block-video-content-v3/video-content-v3.php}

@@ -2,8 +2,8 @@
 
 acf_register_block_type(
 	array(
-		'name'            => 'responsive-table',
-		'title'           => __( 'Responsive table', 'Global-theme Admin' ),
+		'name'            => 'video-content-v3',
+		'title'           => __( 'Video content v3', 'Global-theme Admin' ),
 		'render_callback' => 'athena_block_render_post_object',
 		'category'        => 'common',
 		'icon'            => get_svg_icon_content('brick.svg'),

package/components/{component-responsive-video/responsive-video.scss → block-video-content-v3/video-content-v3.scss}

@@ -1,8 +1,14 @@
-// @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
+// @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins'; 
 // @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
-@use 'NodeModules/@pernod-ricard-global-cms/cblvideocontroller/vc-styles';
 // @use 'Assets/scss/theme/breakpoints';
-
-@mixin responsiveVideo() {
+@use 'NodeModules/@pernod-ricard-global-cms/cblvideocontroller/vc-styles';
+@use 'Assets/scss/blocks/video-content-v3/video-content-v3-extra';
+.video-content-v3 {
+	display: grid;
+	grid-template: 'main' / 1fr;
 	@include vc-styles.basic();
-}
+	&:has(.video-playing) {
+		z-index: 99;
+	}
+	@include video-content-v3-extra.additionalStyles();
+}

package/components/block-video-content-v3/video-content-v3.twig

@@ -0,0 +1,17 @@
+
+{% set blockClassName = "video-content-v3" %}
+{% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields: fields, block: block }, with_context = false) %}
+{% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields: fields, block: block, blockClassName, blockClassName }, with_context = false) %}
+{% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields: fields, block: block }, with_context = false) %}
+{% set styleEntryPoint = include('entry-points/entry-point-style.twig', { fields: fields, block: block, is_preview }, with_context = false) %}
+{% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
+{% set sectionStyles =  styleEntryPoint %}
+{{previewEntryPoint}}
+<style>
+	.{{blockClassName}}.{{block.id}}{
+		{{sectionStyles}}
+	}
+</style>
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
+	{{htmlEntryPoint}}
+</section>

package/components/{component-accent-image-v2/accent-image-v2.twig → component-accent-image-v3/accent-image-v3.twig}

@@ -31,56 +31,24 @@
 		{% if image.animations.enable_animations %}
 			{{include('components/animations-style.twig', { fields: image, suffix }, with_context = false)}}
 		{% endif %}
-		
         <style>
-		.loaded .{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image {
-			{{include('components/animations.twig', { fields: image, block: block, blockClassName: blockClassName, suffix }, with_context = false)}}
-			/* animation: var(--animation-name) var(--animation-duration)
-				var(--animation-delay) var(--animation-easing)
-				var(--animation-repeat) var(--animation-fill-mode)
-				var(--animation-direction); */
-		}
-		.{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image {
-			z-index: {{zIndex}};
-			grid-area: main;
-			pointer-events: {{image.enable_accent_image_cta ? 'all' : 'none'}};
-			position: absolute;
-			place-self: {{mobileSettings.vertical_snap|ru}}
-			{{mobileSettings.horizontal_snap|ru}};
-			width: {{mobileWidth}};
-			height: {{mobileWidth}};
-			translate: {{mobilePositioning}};
-		}
-	
-		.{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image .{{blockClassName}}__image-element.element {
-			width: 100%;
-			height: 100%;
-			display: flex;
-			object-fit: {{imageFitStyle}};
-			border-radius: {{borderRadius}};
-			border: 0 solid transparent;
-			opacity: {{opacity}};
-			rotate: {{rotationMobile ~ 'deg'}};
-		}
-
-		.{{blockClassName}}__image-number {
-			z-index: 99;
-			position: absolute;
-			font-size: 40px;
-			left: 50%;
-			top: 50%;
-			transform: translate(-50%, -50%);
-			color: white;
-			text-shadow: 1px 1px 1px blue;
-		}
-
-		@media screen and (min-width: 768px) {
+			.loaded .{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image {
+				{{include('components/animations.twig', { fields: image, block: block, blockClassName: blockClassName, suffix }, with_context = false)}}
+				animation: var(--animation-name) var(--animation-duration)
+					var(--animation-delay) var(--animation-easing)
+					var(--animation-repeat) var(--animation-fill-mode)
+					var(--animation-direction);
+			}
 			.{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image {
-				place-self: {{image.desktop_positioning.vertical_snap|ru}}
-				{{image.desktop_positioning.horizontal_snap|ru}};
-				width: {{desktopWidth}};
-				height: {{desktopWidth}};
-				translate: {{desktopPositioning}};
+				z-index: {{zIndex}};
+				grid-area: main;
+				pointer-events: {{image.enable_accent_image_cta ? 'all' : 'none'}};
+				position: absolute;
+				place-self: {{mobileSettings.vertical_snap|ru}}
+				{{mobileSettings.horizontal_snap|ru}};
+				width: {{mobileWidth}};
+				height: {{mobileWidth}};
+				translate: {{mobilePositioning}};
 			}
 			.{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image .{{blockClassName}}__image-element.element {
 				width: 100%;
@@ -90,9 +58,37 @@
 				border-radius: {{borderRadius}};
 				border: 0 solid transparent;
 				opacity: {{opacity}};
-				rotate: {{rotationDesktop ~ 'deg'}};
+				rotate: {{rotationMobile ~ 'deg'}};
+			}
+			.{{blockClassName}}__image-number {
+				z-index: 99;
+				position: absolute;
+				font-size: 40px;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+				color: white;
+				text-shadow: 1px 1px 1px blue;
+			}
+			@media screen and (min-width: 768px) {
+				.{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image {
+					place-self: {{image.desktop_positioning.vertical_snap|ru}}
+					{{image.desktop_positioning.horizontal_snap|ru}};
+					width: {{desktopWidth}};
+					height: {{desktopWidth}};
+					translate: {{desktopPositioning}};
+				}
+				.{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image .{{blockClassName}}__image-element.element {
+					width: 100%;
+					height: 100%;
+					display: flex;
+					object-fit: {{imageFitStyle}};
+					border-radius: {{borderRadius}};
+					border: 0 solid transparent;
+					opacity: {{opacity}};
+					rotate: {{rotationDesktop ~ 'deg'}};
+				}
 			}
-		}
 		</style>
 			<{{accentImageContainerElement}}
 			{{accentImageCtaType == 'link' ? 'href="' ~ image.accent_image_link.url ~ '" ' ~ 'target="' ~ image.accent_image_link.target ~ '" ' : ''}}
@@ -108,7 +104,6 @@
 			{% if fields.accent_image_v2.show_image_number and is_preview%}
 				<div class="{{blockClassName}}__image-number">{{ loop.index }}</div>
 			{% endif %}
-
         </{{accentImageContainerElement}}>
     {% endfor %}
 {% endif %}