@total_onion/onion-library 3.0.49 → 3.2.0

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

@@ -1,213 +0,0 @@
-@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

@@ -1,96 +0,0 @@
-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

@@ -1,31 +0,0 @@
-@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

@@ -1,13 +0,0 @@
-@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

@@ -1,13 +0,0 @@
-//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

@@ -1,125 +0,0 @@
-@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