@total_onion/onion-library 3.2.0 → 3.2.2

package/components/block-post-info-v3/post-info-v3/shopify-add-to-cart.twig

@@ -0,0 +1,31 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set icon = field.enable_cta_icon %}
+{% set postColour = '--post-colour: ' ~ post.post_colour|ru ~ ';' %}
+{% set postTextColourStyle = '--post-text-colour-style: ' ~ post.post_text_colour_style|ru ~ ';' %}
+{% set ctaStyle = field.cta_style|ru %}
+{% if field.cta_style_select|ru == 'post-colour' %}
+	{% set ctaStyle = 'post-colour' %}
+{% endif %}
+{% if field.cta_style_select|ru == 'post-text-colour-style' %}
+	{% set ctaStyle = 'post-text-colour-style' %}
+{% endif %}
+{% set widgetStyles = gridLayoutElement ~ postColour ~ postTextColourStyle %}
+{% set productType = field.product_type|ru %}
+{% if productType == 'standard' %}
+	<style>
+		.{{blockClassName}}__shopify-add-to-cart.{{block.id}}{
+			{{widgetStyles}}
+		}
+	</style>
+	{% set productId = post.meta('shopify_pim_id') %}
+	<div class="{{blockClassName}} {{blockClassName}}__info-item {{blockClassName}}__shopify-add-to-cart shopify-add-to-cart shopify-wrapper shopify-integration has-shop shop-shopify {{block.id}}" data-pim="{{ productId }}" data-label="{{field.shopify_text}}" data-shopifya2cbtnstyle="cmpl-cta-style-{{field.cta_style|default('1')}}"></div>
+{% endif %}
+{% if productType == 'engraved' %}
+	<style>
+		.{{blockClassName}}__shopify-add-to-cart.{{block.id}}{
+			{{widgetStyles}}
+		}
+	</style>
+	{% set productEngravedId = post.meta('shopify_engraved_pim_id') %}
+	<div class="{{blockClassName}} {{blockClassName}}__info-item {{blockClassName}}__shopify-add-to-cart shopify-add-to-cart shopify-wrapper shopify-integration has-shop shop-shopify engraved {{block.id}}" data-pim="{{ productEngravedId }}" data-label="{{field.shopify_text}}" data-shopifya2cbtnstyle="cmpl-cta-style-{{field.cta_style|default('1')}}"></div>
+{% endif %}

package/components/block-post-info-v3/post-info-v3/social-networks.twig

@@ -0,0 +1,33 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+<style>
+	.{{blockClassName}}__social-networks.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{gridLayoutElement}}
+	}
+</style>
+
+<div class="{{blockClassName}}__content-container {{block.id}} {{blockClassName}}__info-item">
+	<div class="{{blockClassName}}__social-networks-inner-container">
+		{% if field.share_label is defined and field.share_label is not empty %}
+			<p class="{{blockClassName}}__social-networks-share-label">{{field.share_label}}</p>
+		{% endif %}
+		<div class="{{blockClassName}}__social-networks-links-container">
+		{% for social in options.social_networks.networks %}
+			{% if social.enabled %}
+				{% set image = options.cta_icons[social.social_network] %}
+
+				{% set isSVG = image.post_mime_type == 'image/svg+xml' %}
+				
+				{% set target = social.social_link.target is not empty ? social.social_link.target : "_self" %}
+				
+				<a class="{{blockClassName}}__social-networks-link-container" href="{{social.social_link.url}}" aria-label="social-network-link-{{social.social_network}}" target="{{target}}">
+					{% if isSVG and false %}
+						{{get_raw_svg(image.id)}}
+					{% else %}
+						<img class="{{blockClassName}}__social-networks-image style-svg" src="{{image.src}}" loading="lazy" width="30" height="30" alt="{{ image.alt }}">
+					{% endif %}
+				</a>
+			{% endif %}
+		{% endfor %}
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,9 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+<style>
+	.{{blockClassName}}__spacer-container.{{block.id}}{
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__spacer-container {{blockClassName}}__info-item {{block.id}}">
+	{{ include( 'blocks/spacer-v3.twig', {fields : field, block, blockClassName}, with_context = false) }}
+</div>

package/components/block-post-info-v3/post-info-v3.js

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

package/components/block-post-info-v3/post-info-v3.scss

@@ -0,0 +1,210 @@
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../component-content-box-settings-v3/content-box-settings-v3';
+@use '../component-grid-layout-container-v3/grid-layout-container-v3';
+@use '../component-grid-layout-element-v3/grid-layout-element-v3';
+@use '../component-element-positioning-v3/element-positioning-v3';
+@use '../component-gradient-overlay-v3/gradient-overlay-v3';
+@use '../component-social-media-share-v3/social-media-share-v3';
+@use '../component-better-reviews-v3/better-reviews-v3';
+@use '../../breakpoints';
+@layer base-styles {
+	.post-info-v3 {
+		display: grid;
+		grid-auto-columns: 1fr;
+		grid-template: 'main' / 1fr;
+		@include content-box-settings-v3.contentBoxSettingsV3();
+		@include grid-layout-container-v3.gridLayoutContainer();
+		@include social-media-share-v3.social-media-share();
+		@include better-reviews-v3.better-reviews();
+		&__post-cover-link {
+			grid-area: unset;
+			position: absolute;
+			inset: 0;
+			width: 100%;
+			height: 100%;
+			z-index: 99;
+			opacity: 0;
+		}
+		&__post-cover-label {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			margin: -1px;
+			padding: 0;
+			overflow: hidden;
+			clip: rect(0, 0, 0, 0);
+			white-space: nowrap;
+			border: 0;
+		}
+		&__info-item {
+			@include grid-layout-element-v3.gridLayoutElement();
+			width: 100%;
+			position: relative;
+			overflow: hidden;
+		}
+		&__post-video {
+			aspect-ratio: var(
+				--image-aspect-ratio-mobile,
+				var(--image-aspect-ratio-desktop)
+			);
+			width: 100%;
+			object-fit: cover;
+			height: auto;
+
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				aspect-ratio: var(--image-aspect-ratio-portrait);
+			}
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				aspect-ratio: var(--image-aspect-ratio-desktop);
+			}
+		}
+		&__content-container {
+			width: 100%;
+		}
+		&__cta-selection-container {
+			@include grid-layout-element-v3.gridLayoutElement();
+		}
+		&__cta {
+			display: flex;
+		}
+		&__cta-style-post-colour,
+		&__cta-style-post-text-colour-style {
+			padding-block: core-functions-v3.fluidSize(10);
+			padding-inline: core-functions-v3.fluidSize(20);
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				padding-block: core-functions-v3.fluidSize(10);
+				padding-inline: core-functions-v3.fluidSize(20);
+			}
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				padding-block: core-functions-v3.fluidSize(10);
+				padding-inline: core-functions-v3.fluidSize(20);
+			}
+		}
+		&__cta-style-post-colour {
+			color: var(--post-colour);
+			border: 1px solid var(--post-colour);
+		}
+		&__cta-style-post-text-colour-style {
+			color: var(--post-text-colour-style);
+			border: 1px solid var(--post-text-colour-style);
+		}
+		&__post-link,
+		&__better-reviews {
+			max-width: max-content;
+		}
+		&__gradient-overlay {
+			height: 100%;
+			@include gradient-overlay-v3.gradientOverlay();
+		}
+		&__post-tags {
+			pointer-events: none;
+			display: flex;
+			width: auto;
+			@include grid-layout-element-v3.gridLayoutElement();
+		}
+		&__post-image-container {
+			display: grid;
+			grid-template: 'main' / 1fr;
+			&--image-accent {
+				position: relative;
+				img,
+				svg {
+					margin: unset;
+					@include element-positioning-v3.elementPositioning();
+				}
+			}
+		}
+		&__post__image {
+			display: flex;
+			justify-content: center;
+			margin-inline: auto;
+			grid-area: main;
+			height: auto;
+			aspect-ratio: var(
+				--image-aspect-ratio-mobile,
+				var(--image-aspect-ratio-desktop)
+			);
+			@include grid-layout-element-v3.gridLayoutElement();
+			width: var(--post-image-width-mobile);
+
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				aspect-ratio: var(--image-aspect-ratio-portrait);
+			}
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				width: var(--post-image-width-desktop);
+				aspect-ratio: var(--image-aspect-ratio-desktop);
+			}
+		}
+		&__post__image {
+			object-fit: var(--image-fit-style);
+			margin: auto;
+		}
+		&__post-author-label {
+			display: flex;
+		}
+		&__global-image {
+			z-index: var(--global-image-zindex);
+			max-width: var(--global-image-max-width);
+			min-height: 100%;
+		}
+		&__global-image__picture {
+			width: var(--global-image-width);
+			display: flex;
+			position: var(--global-image-position);
+			inset: 0;
+		}
+		&__global-image__image {
+			object-fit: var(--global-image-fit-style);
+		}
+		&__product-logo {
+			max-width: core-functions-v3.fluidSize(
+				var(--logo-max-width-mobile),
+				'mobile'
+			);
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				max-width: core-functions-v3.fluidSize(
+					var(--logo-max-width-desktop),
+					'desktop'
+				);
+			}
+		}
+		&__post-text-alternative-style {
+			width: auto;
+			@include grid-layout-element-v3.gridLayoutElement();
+		}
+		&__social-networks-inner-container {
+			display: flex;
+			flex-direction: column;
+			gap: core-functions-v3.fluidSize(10);
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				flex-direction: row;
+				gap: core-functions-v3.fluidSize(20);
+			}
+		}
+		&__social-networks-links-container {
+			display: flex;
+			gap: core-functions-v3.fluidSize(20);
+		}
+		&__social-networks-link-container {
+			img {
+				width: core-functions-v3.fluidSize(30);
+				height: core-functions-v3.fluidSize(30);
+			}
+		}
+		&__social-networks-share-label {
+			--default-font-weight: 700;
+			line-height: var(--paragraph-line-height);
+			letter-spacing: var(--paragraph-letter-spacing);
+			font-family: var(--paragraph-font-family);
+			font-weight: var(--default-font-weight);
+			font-size: core-functions-v3.fontSize(18, 'mobile');
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				font-size: core-functions-v3.fontSize(22, 'portrait');
+			}
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				font-size: core-functions-v3.fontSize(22, 'desktop');
+			}
+		}
+	}
+}

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

@@ -0,0 +1,67 @@
+{% set blockClassName = "post-info-v3" %}
+{% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields, block }, with_context = false) %}
+{% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields, block, blockClassName, options, environment, is_preview, cta_styles, 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-v3.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 layoutType = fields.layout_type|ru|default('grid') %}
+{% set layoutStyles = '' %}
+{% if layoutType == 'flex' %}
+	{% set layoutStyles = include('components/flex-layout-container-v3.twig', { fields, block }, with_context = false) %}
+	{% set layoutClass = 'flex-layout-container' %}
+{% elseif layoutType == 'grid' %}
+	{% set layoutStyles = include('components/grid-layout-container-v3.twig', { fields, block }, with_context = false) %}
+	{% set layoutClass = 'grid-layout-container' %}
+{% endif %}
+
+{% if fields.grid_layout.grid_template_rows_custom_desktop == 'subgrid' %}
+	{% set layoutClass = layoutClass ~ ' subgrid-layout-desktop ' %}
+{% endif %}
+{% if fields.grid_layout.grid_template_rows_custom_portrait == 'subgrid' %}
+	{% set layoutClass = layoutClass ~ ' subgrid-layout-portrait ' %}
+{% endif %}
+{% if fields.grid_layout.grid_template_rows_custom_mobile == 'subgrid' %}
+	{% set layoutClass = layoutClass ~ ' subgrid-layout-mobile ' %}
+{% endif %}
+
+{% set sectionStyles =  styleEntryPoint ~ gridGapMults ~ layoutStyles %}
+{% if fields.post_info_type|ru == 'post-info' %}
+	{% set post = get_post(fields.post) %}
+{% endif %}
+{% if fields.post_info_type|ru == 'post-taxonomy' %}
+	{% set post = get_term(fields.taxonomy) %}
+{% endif %}
+
+{% set postTypeFields = fields.post_fields %}
+{% set layout = fields.layout|ru %}
+{% set imageSizes = imageSizes %}
+
+{{previewEntryPoint}}
+
+<style>
+	.{{blockClassName}}.{{block.id}}{
+		{{sectionStyles}}
+	}
+</style>
+
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{layoutClass}} {{block.className}} {{loop > 0 and block.className ? block.className ~ '-' ~ loop : ''}} {{classNameEntryPoint}} {{block.className}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-assetkey="post-info-v3" data-post-info-type={{fields.post_info_type}}>
+
+	{% for field in postTypeFields %}
+		{% if block %}
+			{% set block = block|merge({'anchor' : '','className' : '', 'id': block.id ~ '-' ~ loop.index }) %}
+		{% endif %}
+		{% if field.acf_fc_layout == 'cta_selection' or field.acf_fc_layout == 'social_media_share' %}
+			{{include('components/' ~ field.acf_fc_layout|replace({'_': '-'}) ~ '.twig', {fields: field, field, post, block, blockClassName, postType, options, cta_styles, imageSizes}, with_context = false, ignore_missing = true)}}
+		{% else %}
+			{{include('blocks/post-info-v3/' ~ field.acf_fc_layout|replace({'_': '-'}) ~ '.twig', {field, post, block, blockClassName, postType, options, cta_styles, imageSizes}, with_context = false, ignore_missing = true)}}
+		{% endif %}
+	{% endfor %}
+	{% if fields.enable_post_cover_link %}
+		{% set coverlinkHover = fields.enable_post_cover_link_hover_effect ? 'post-cover-link-hover-effect' : '' %}
+		<a data-pattern-post-info="link" href="{{ post.link }}" target="_self" class="{{blockClassName}}__post-cover-link {{coverlinkHover}}" aria-label="{{post.title}}">
+			<span class="{{blockClassName}}__post-cover-label">{{post.title}}</span>
+		</a>
+	{% endif %}
+	{{htmlEntryPoint}}
+</section>