@total_onion/onion-library 3.2.0 → 3.2.2

package/components/fields-content-container-settings-v3/content-container-settings-v3.scss

@@ -0,0 +1,213 @@
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../component-box-shadow/box-shadow';
+@use '../../breakpoints';
+
+@mixin contentContainerSettings() {
+	&__inner-container {
+		grid-area: main;
+		place-self: var(--content-box-vert-align-mobile)
+			var(--content-box-horiz-align-mobile);
+		z-index: var(--content-z-index, 5);
+		overflow: var(--content-box-overflow);
+		min-width: min-content;
+		aspect-ratio: var(--content-box-aspect-ratio);
+		border-radius: var(--border-radius);
+		border-width: var(--border-width);
+		border-color: var(--border-colour);
+		border-style: var(--border-style);
+		display: flex;
+		flex-direction: var(--content-box-items-direction-mobile, column);
+		justify-content: var(--content-items-alignment-mobile);
+		align-items: center;
+		background-color: var(--cb-bg-colour);
+		padding: calc(
+				var(--global-content-box-padding-block) *
+					var(--content-box-top-padding-mult-mobile)
+			)
+			calc(
+				var(--global-content-box-padding-inline) *
+					var(--content-box-right-padding-mult-mobile)
+			)
+			calc(
+				var(--global-content-box-padding-inline) *
+					var(--content-box-bottom-padding-mult-mobile)
+			)
+			calc(
+				var(--global-content-box-padding-inline) *
+					var(--content-box-left-padding-mult-mobile)
+			);
+		margin: calc(
+				var(--global-inline-spacing) *
+					var(--content-container-top-margin-mobile)
+			)
+			calc(
+				var(--global-inline-spacing) *
+					var(--content-container-right-margin-mobile)
+			)
+			calc(
+				var(--global-inline-spacing) *
+					var(--content-container-bottom-margin-mobile)
+			)
+			calc(
+				var(--global-inline-spacing) *
+					var(--content-container-left-margin-mobile)
+			);
+		column-gap: var(
+			--content-items-micro-gap-mobile,
+			calc(var(--content-items-gap-mobile) * var(--global-inline-spacing))
+		);
+		@include core-mixins.device(breakpoints.$tabPortrait) {
+			justify-content: var(--content-items-alignment-portrait);
+			place-self: var(--content-box-vert-align-portrait)
+				var(--content-box-horiz-align-portrait);
+			padding: calc(
+					var(--global-content-box-padding-block) *
+						var(--content-box-top-padding-mult-portrait)
+				)
+				calc(
+					var(--global-content-box-padding-inline) *
+						var(--content-box-right-padding-mult-portrait)
+				)
+				calc(
+					var(--global-content-box-padding-inline) *
+						var(--content-box-bottom-padding-mult-portrait)
+				)
+				calc(
+					var(--global-content-box-padding-inline) *
+						var(--content-box-left-padding-mult-portrait)
+				);
+			margin: calc(
+					var(--global-inline-spacing) *
+						var(--content-container-top-margin-portrait)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-container-right-margin-portrait)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-container-bottom-margin-portrait)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-container-left-margin-portrait)
+				);
+		}
+
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			column-gap: var(
+				--content-items-micro-gap-desktop,
+				calc(
+					var(--content-items-gap-desktop) *
+						var(--global-inline-spacing)
+				)
+			);
+			justify-content: var(--content-items-alignment);
+			max-width: var(--cb-max-width);
+			place-self: var(--content-box-vert-align)
+				var(--content-box-horiz-align);
+			padding: calc(
+					var(--global-content-box-padding-block) *
+						var(--content-box-top-padding-mult)
+				)
+				calc(
+					var(--global-content-box-padding-inline) *
+						var(--content-box-right-padding-mult)
+				)
+				calc(
+					var(--global-content-box-padding-inline) *
+						var(--content-box-bottom-padding-mult)
+				)
+				calc(
+					var(--global-content-box-padding-inline) *
+						var(--content-box-left-padding-mult)
+				);
+			margin: calc(
+					var(--global-inline-spacing) *
+						var(--content-container-top-margin)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-container-right-margin)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-container-bottom-margin)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-container-left-margin)
+				);
+		}
+
+		@include box-shadow.boxShadow();
+	}
+	&__content-container {
+		max-width: var(--wysiwyg-max-width-mobile);
+		margin-inline: auto;
+		display: grid;
+		word-break: normal;
+		width: var(--content-container-width, 100%);
+		-webkit-text-stroke: core-functions.fontSize(
+				var(--text-stroke-width),
+				'static'
+			)
+			var(--text-stroke-colour);
+		@include core-mixins.defaultThemeTextColours();
+		@include core-mixins.defaultTextTransform();
+		@include core-mixins.defaultTextAlign();
+		@include core-mixins.responsiveShowHide();
+		p,
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6,
+		a,
+		li,
+		div {
+			@include core-mixins.defaultFontWeight();
+			@include core-mixins.defaultFontStyle();
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		@include core-mixins.device(breakpoints.$tabPortrait) {
+			max-width: var(--wysiwyg-max-width-portrait);
+		}
+
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			max-width: var(--wysiwyg-max-width);
+		}
+	}
+
+	&--text-shadow {
+		@include core-mixins.textShadow();
+	}
+
+	&__cta-selection-container {
+		width: 100%;
+		display: var(--cta-container-display);
+		grid-template-columns: var(--grid-columns-mobile);
+		flex-wrap: wrap;
+		flex-direction: var(--cta-flex-direction);
+		justify-content: var(--cta-alignment-mobile);
+		gap: calc(var(--global-inline-spacing) * var(--cta-spacing-gap-mobile));
+
+		@include core-mixins.device(breakpoints.$tabPortrait) {
+			gap: calc(
+				var(--global-inline-spacing) * var(--cta-spacing-gap-desktop)
+			);
+			justify-content: var(--cta-alignment-portrait);
+			grid-template-columns: var(--grid-columns-portrait);
+		}
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			justify-content: var(--cta-alignment);
+			grid-template-columns: var(--grid-columns-desktop);
+		}
+	}
+}

package/components/fields-content-container-v3/content-container-v3.js

@@ -0,0 +1,96 @@
+import shop from 'Assets/js/modules/library-modules/shopify/shop';
+
+export default function contentContainerJs(block) {
+	if (!block) {
+		return;
+	}
+
+	const blockClassName = block.dataset.assetkey;
+	const formContainerElement = block.querySelector('.form-container');
+	const modalFormContainerElement = block.querySelector(
+		'.form-container__modal'
+	);
+	const countdownElement = block.querySelector('.countdowndate');
+	const socialMediaElement = block.querySelector('.social-media-share-popup');
+	const accordionV2Element = block.querySelector(
+		`.${blockClassName}__accordion-v2`
+	);
+	const marketSelector = block.querySelector('.market-selector');
+	const shopifySelector = block.querySelector('.shopify__cart');
+	const contentTooltip = block.querySelector('.content-tooltip-wrapper');
+	const spotifyEmbed = block.querySelector('.spotify-embed');
+	const truncatedText = block.querySelector('.truncated-text');
+	// const accordionV3Element = block.querySelector(
+	// 	'.standard-content-v2__accordion-v3'
+	// );
+
+	if (formContainerElement || modalFormContainerElement) {
+		import(
+			'Assets/js/modules/library-modules/form-selection/form-selection.js'
+		).then((module) => {
+			module.default(block);
+		});
+	}
+
+	if (countdownElement) {
+		import('Assets/js/modules/library-modules/countdown/countdown.js').then(
+			(module) => {
+				module.default(block);
+			}
+		);
+	}
+
+	if (socialMediaElement) {
+		import(
+			'Assets/js/modules/library-modules/social-media-share/social-media-share.js'
+		).then((module) => {
+			module.default(block);
+		});
+	}
+
+	if (accordionV2Element) {
+		import(
+			'Assets/js/modules/library-modules/accordion-v2/accordion-v2.js'
+		).then((module) => {
+			module.default(block);
+		});
+	}
+
+	if (marketSelector) {
+		import(
+			'Assets/js/modules/library-modules/market-selector/market-selector.js'
+		).then((module) => {
+			module.default(block);
+		});
+	}
+	if (shopifySelector) {
+		shop.loadShops();
+	}
+	if (contentTooltip) {
+		import(
+			'Assets/js/modules/library-modules/content-tooltip/content-tooltip.js'
+		).then((module) => {
+			module.default(block);
+		});
+	}
+	if (spotifyEmbed) {
+		import(
+			'Assets/js/modules/library-modules/spotify-embed/spotify-embed.js'
+		).then((module) => {
+			module.default(block);
+		});
+	}
+	if (truncatedText) {
+		import(
+			'Assets/js/modules/library-modules/truncated-text/truncated-text.js'
+		).then((module) => {
+			module.default(block);
+		});
+	}
+
+	// if (accordionV3Element) {
+	// 	import('Assets/js/modules/library-modules/accordion-v3/accordion-v3.js').then((module) => {
+	// 		module.default(block);
+	// 	})
+	// }
+}

package/components/fields-content-container-v3/content-container-v3.scss

@@ -0,0 +1,31 @@
+@use '../component-content-image-v3/content-image-v3';
+@use '../component-nav-menu-v3/nav-menu-v3';
+@use '../component-accent-text-v3/accent-text-v3';
+@use '../component-content-container-settings-v3/content-container-settings-v3';
+@use '../component-blockquote-v3/blockquote-v3';
+@use '../component-social-media-share-v3/social-media-share-v3';
+
+@mixin contentContainer() {
+	@include nav-menu-v3.navMenu();
+	@include accent-text-v3.accent-text();
+	@include content-container-settings-v3.contentContainerSettings();
+	@include blockquote-v3.blockquote();
+	@include social-media-share-v3.social-media-share();
+
+	&__video-play-button-container {
+		display: grid;
+		width: 100%;
+		pointer-events: all;
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+	&__video-play-button {
+		grid-area: unset;
+		place-self: var(--playbutton-vertical-alignment, center)
+			var(--playbutton-horizontal-alignment, center);
+	}
+	&__content-image {
+		@include content-image-v3.contentImage();
+	}
+}

package/components/fields-core-critical-v3/core-critical-v3.scss

@@ -0,0 +1,13 @@
+@use '../fields-core-root-variables-v3/core-root-variables-v3';
+@use '../fields-core-css-sizing-vars-v3/core-css-sizing-vars-v3';
+@use '../fields-core-typography-v3/core-typography-v3';
+@use '../fields-core-css-modules-v3/core-css-modules-v3';
+@use '../fields-core-generic-v3/core-generic-v3';
+
+@mixin coreCriticalV3() {
+	@include core-root-variables-v3.coreRootVariablesV3();
+	@include core-css-sizing-vars-v3.coreCssSizingVarsV3();
+	@include core-typography-v3.coreTypographyV3();
+	@include core-css-modules-v3.coreCssModulesV3();
+	@include core-generic-v3.coreGenericV3();
+}

package/components/fields-core-css-modules-v3/core-css-modules-v3.scss

@@ -0,0 +1,13 @@
+//Generic Modules that use globally scoped classes (eg. '.cmpl-block-padding')
+@use '../component-animations-v3/animations-v3';
+@use '../component-block-padding-v3/block-padding-v3';
+@use '../component-block-settings-v3/block-settings-v3';
+@use '../fields-core-cta-v3/core-cta-v3';
+@use '../component-core-group-container-styles-v3/core-group-container-styles-v3';
+@mixin coreCssModulesV3() {
+	@include block-padding-v3.blockPadding();
+	@include animations-v3.animations();
+	@include block-settings-v3.blockSettings();
+	@include core-cta-v3.core-cta();
+	@include core-group-container-styles-v3.coreGroupContainerStylesV3();
+}

package/components/fields-core-css-sizing-vars-v3/core-css-sizing-vars-v3.scss

@@ -0,0 +1,125 @@
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../../breakpoints';
+@mixin coreCssSizingVarsV3() {
+	@layer base-styles {
+		body {
+			--screen-width: var(--screen-width-mobile);
+			--font-reference: var(--font-reference-mobile);
+			--design-reference: var(--mobile-design-reference);
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				--screen-width: var(--screen-width-portrait);
+				--font-reference: var(--font-reference-portrait);
+				--design-reference: var(--portrait-design-reference);
+			}
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				--screen-width: var(--screen-width-landscape);
+				--font-reference: var(--font-reference-landscape);
+				--design-reference: var(--landscape-design-reference);
+			}
+			@include core-mixins-v3.device(breakpoints.$desktop) {
+				--screen-width: var(--screen-width-desktop);
+				--font-reference: var(--font-reference-desktop);
+				--design-reference: var(--desktop-design-reference);
+			}
+			@include core-mixins-v3.device(breakpoints.$desktop-fullhd) {
+				--screen-width: var(--screen-width-fullhd);
+				--font-reference: var(--font-reference-fullhd);
+				--design-reference: var(--fullhd-design-reference);
+			}
+		}
+		body {
+			//defaults (can be overridden by cms or block code later on)
+			--mobile-inline: 20;
+			--portrait-inline: 40;
+			--landscape-inline: 40;
+			--desktop-inline: 40;
+			--screen-width-fullhd: 1920px;
+			--font-reference-fullhd: 1920px;
+			--screen-width-desktop: 1440px;
+			--font-reference-desktop: 1440px;
+			--screen-width-landscape: 100vw;
+			--font-reference-landscape: 100vw;
+			--screen-width-portrait: 100vw;
+			--font-reference-portrait: 100vw;
+			--font-reference-mobile: 375px;
+			--screen-width-mobile: 375px;
+			--screen-width-static: 1440px;
+			--fullhd-design-reference: 1920;
+			--desktop-design-reference: 1440;
+			--landscape-design-reference: 1440;
+			--portrait-design-reference: 1440;
+			--mobile-design-reference: 375;
+
+			--global-inline-spacing: #{core-functions-v3.fluidSize(
+					var(--mobile-inline)
+				)};
+
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				--global-inline-spacing: #{core-functions-v3.fluidSize(
+						var(--portrait-inline, 40)
+					)};
+			}
+
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				--global-inline-spacing: #{core-functions-v3.fluidSize(
+						var(--landscape-inline, 40)
+					)};
+			}
+
+			@include core-mixins-v3.device(breakpoints.$desktop) {
+				--global-inline-spacing: #{core-functions-v3.fluidSize(
+						var(--desktop-inline, 40)
+					)};
+			}
+		}
+
+		body {
+			--heading-block-spacing: var(--heading-block-spacing-mobile);
+
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				--heading-block-spacing: var(--heading-block-spacing-portrait);
+			}
+
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				--heading-block-spacing: var(--heading-block-spacing-desktop);
+			}
+		}
+		body {
+			--paragraph-block-spacing: var(--paragraph-block-spacing-mobile);
+
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				--paragraph-block-spacing: var(
+					--paragraph-block-spacing-portrait
+				);
+			}
+
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				--paragraph-block-spacing: var(
+					--paragraph-block-spacing-desktop
+				);
+			}
+		}
+		body {
+			--list-item-block-spacing: var(--list-item-block-spacing-mobile);
+
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				--list-item-block-spacing: var(
+					--list-item-block-spacing-portrait
+				);
+			}
+
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				--list-item-block-spacing: var(
+					--list-item-block-spacing-desktop
+				);
+			}
+		}
+		body {
+			--global-content-max-width: #{core-functions-v3.fluidSize(
+					var(--global-content-max-width-setting),
+					'static'
+				)};
+		}
+	}
+} // End of mixin