@total_onion/onion-library 3.0.49 → 3.2.0

package/components/component-accent-text-v3/accent-text-v3-extra.scss

@@ -1,2 +0,0 @@
-@mixin additionalStyles() {
-}

package/components/component-accent-text-v3/accent-text-v3.scss

@@ -1,60 +0,0 @@
-@use '../fields-core-mixins-v3/core-mixins-v3';
-@use '../fields-core-functions-v3/core-functions-v3';
-@use '../../breakpoints';
-
-@mixin accentTextV3() {
-	&__accent-text {
-		display: flex;
-		align-items: center;
-		color: var(--accent-text-colour-mobile);
-		text-align: center;
-		place-self: var(--alignment, center);
-		font-family: var(--secondary-font-family);
-		letter-spacing: 0.8em;
-		text-transform: uppercase;
-
-		gap: core-functions-v3.fluidSize(10);
-		margin-inline: core-functions-v3.fluidSize(5, 'mobile');
-		font-size: core-functions-v3.fontSize(10, 'mobile');
-
-		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-			font-size: core-functions-v3.fontSize(10, 'portrait');
-			margin-inline: core-functions-v3.fluidSize(5, 'portrait');
-			gap: core-functions-v3.fluidSize(20, 'portrait');
-		}
-
-		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-			color: var(--accent-text-colour);
-			font-size: core-functions-v3.fontSize(10, 'desktop');
-			margin-inline: core-functions-v3.fluidSize(5, 'desktop');
-			gap: core-functions-v3.fluidSize(20, 'desktop');
-		}
-
-		&::before,
-		&::after {
-			content: '';
-			background-color: var(
-				--accent-text-colour-mobile,
-				var(--default-text-colour-mobile)
-			);
-			width: core-functions-v3.fluidSize(20, 'mobile');
-			height: core-functions-v3.fluidSize(2, 'mobile');
-
-			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-				width: core-functions-v3.fluidSize(40, 'portrait');
-				height: core-functions-v3.fluidSize(2, 'portrait');
-			}
-
-			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-				background-color: var(
-					--accent-text-colour,
-					var(--default-text-colour-desktop)
-				);
-				width: core-functions-v3.fluidSize(80, 'desktop');
-				height: core-functions-v3.fluidSize(2, 'desktop');
-			}
-		}
-
-		// @include accent-text-v3-extra.additionalStyles();
-	}
-}

package/components/component-accent-text-v3/group_686b91fed8f5f.json

@@ -1,220 +0,0 @@
-{
-    "key": "group_686b91fed8f5f",
-    "title": "Component: Accent Text v3",
-    "fields": [
-        {
-            "key": "field_686b91fee3441",
-            "label": "Content",
-            "name": "",
-            "aria-label": "",
-            "type": "tab",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "wpml_cf_preferences": 3,
-            "placement": "top",
-            "endpoint": 0,
-            "no_preference": 0,
-            "selected": 0
-        },
-        {
-            "key": "field_686b91fee383e",
-            "label": "Text content",
-            "name": "text_content",
-            "aria-label": "",
-            "type": "text",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "wpml_cf_preferences": 2,
-            "user_roles": [
-                "all"
-            ],
-            "default_value": "",
-            "maxlength": "",
-            "placeholder": "",
-            "prepend": "",
-            "append": ""
-        },
-        {
-            "key": "field_686b91fee3c2e",
-            "label": "Settings",
-            "name": "",
-            "aria-label": "",
-            "type": "tab",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "wpml_cf_preferences": 3,
-            "placement": "top",
-            "endpoint": 0,
-            "no_preference": 0,
-            "selected": 0
-        },
-        {
-            "key": "field_686b91fee3ffd",
-            "label": "Accent Text Colour",
-            "name": "accent_text_colour",
-            "aria-label": "",
-            "type": "color_picker",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "wpml_cf_preferences": 3,
-            "user_roles": [
-                "all"
-            ],
-            "default_value": "",
-            "enable_opacity": 0,
-            "return_format": "string",
-            "display": "default",
-            "button_label": "Select Color",
-            "color_picker": true,
-            "absolute": false,
-            "input": true,
-            "allow_null": true,
-            "theme_colors": false,
-            "colors": []
-        },
-        {
-            "key": "field_686b91fee43e9",
-            "label": "Alignment",
-            "name": "alignment",
-            "aria-label": "",
-            "type": "radio",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "wpml_cf_preferences": 3,
-            "user_roles": [
-                "all"
-            ],
-            "choices": {
-                "__flex-start": "Left",
-                "__center": "Center",
-                "__flex-end": "Right"
-            },
-            "default_value": "__flex-start",
-            "return_format": "value",
-            "allow_null": 0,
-            "other_choice": 0,
-            "layout": "horizontal",
-            "save_other_choice": 0
-        },
-        {
-            "key": "field_686b91fee47cf",
-            "label": "Enable Mobile Style",
-            "name": "enable_mobile_style",
-            "aria-label": "",
-            "type": "true_false",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "wpml_cf_preferences": 3,
-            "user_roles": [
-                "all"
-            ],
-            "message": "",
-            "default_value": 0,
-            "ui_on_text": "",
-            "ui_off_text": "",
-            "ui": 1,
-            "style": ""
-        },
-        {
-            "key": "field_686b91fee4bb8",
-            "label": "Accent Text Colour Mobile",
-            "name": "accent_text_colour_mobile",
-            "aria-label": "",
-            "type": "color_picker",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": [
-                [
-                    {
-                        "field": "field_686b91fee47cf",
-                        "operator": "==",
-                        "value": "1"
-                    }
-                ]
-            ],
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "wpml_cf_preferences": 3,
-            "user_roles": [
-                "all"
-            ],
-            "default_value": "",
-            "enable_opacity": 0,
-            "return_format": "string",
-            "display": "default",
-            "button_label": "Select Color",
-            "color_picker": true,
-            "absolute": false,
-            "input": true,
-            "allow_null": true,
-            "theme_colors": false,
-            "colors": []
-        }
-    ],
-    "location": [
-        [
-            {
-                "param": "block",
-                "operator": "!=",
-                "value": "all"
-            }
-        ]
-    ],
-    "menu_order": 0,
-    "position": "normal",
-    "style": "default",
-    "label_placement": "top",
-    "instruction_placement": "label",
-    "hide_on_screen": "",
-    "active": false,
-    "description": "Library version - Do not modify in this project as any changes will be overwritten by future updates.",
-    "show_in_rest": 0,
-    "acfe_autosync": [
-        "json"
-    ],
-    "acfml_field_group_mode": "localization",
-    "acfe_form": 0,
-    "acfe_display_title": "",
-    "acfe_meta": "",
-    "acfe_note": "",
-    "modified": 1751880200
-}

package/components/component-accordion-v3/accordion-v3.js

@@ -1,113 +0,0 @@
-export default function accordionV3Js(block) {
-	const blockClassName = block.dataset.assetkey;
-	const sections = block.querySelectorAll(
-		`.${blockClassName}__accordion-content`
-	);
-	const closeAccordionSections = () => {
-		sections.forEach((section) => {
-			if (section.classList.contains('active')) {
-				const question = section.querySelector(
-					`.${blockClassName}__accordion-question-wrapper`
-				);
-				const answer = section.querySelector(
-					`.${blockClassName}__accordion-answer-wrapper`
-				);
-				const svg = section.querySelector(
-					`.${blockClassName}__accordion-icon`
-				);
-				const iconImage = section.querySelector(
-					`.${blockClassName}__accordion-image-wrapper`
-				);
-				const sectionHeight = answer.scrollHeight;
-				answer.animate(
-					[
-						{
-							height: sectionHeight + 'px'
-						},
-						{height: '0px'}
-					],
-					{
-						fill: 'forwards',
-						duration: 400,
-						easing: 'ease-out'
-					}
-				);
-				answer.setAttribute('aria-hidden', 'true');
-				question.classList.remove('active');
-				section.classList.remove('active');
-				if (svg) {
-					svg.classList.remove('active');
-				}
-				if (iconImage) {
-					iconImage.classList.remove('image-icon-active');
-				}
-			}
-		});
-	};
-
-	sections.forEach((section) => {
-		const question = section.querySelector(
-			`.${blockClassName}__accordion-question-wrapper`
-		);
-		const answer = section.querySelector(
-			`.${blockClassName}__accordion-answer-wrapper`
-		);
-		const svg = section.querySelector(`.${blockClassName}__accordion-icon`);
-		const iconImage = section.querySelector(
-			`.${blockClassName}__accordion-image-wrapper`
-		);
-		question.addEventListener('click', () => {
-			const isCollapsed = answer.getAttribute('aria-hidden') === 'true';
-			closeAccordionSections();
-			if (isCollapsed) {
-				const sectionHeight = answer.scrollHeight;
-				answer.animate(
-					[
-						{height: '0px'},
-						{
-							height: sectionHeight + 'px'
-						}
-					],
-					{
-						fill: 'forwards',
-						duration: 400,
-						easing: 'ease-out'
-					}
-				);
-				section.classList.add('active');
-				answer.classList.add('active');
-				answer.setAttribute('aria-hidden', 'false');
-				if (svg) {
-					svg.classList.add('active');
-				}
-				if (iconImage) {
-					iconImage.classList.add('image-icon-active');
-				}
-			} else {
-				const sectionHeight = answer.scrollHeight;
-				section.classList.remove('active');
-				answer.animate(
-					[
-						{
-							height: sectionHeight + 'px'
-						},
-						{height: '0px'}
-					],
-					{
-						fill: 'forwards',
-						duration: 400,
-						easing: 'ease-out'
-					}
-				);
-				answer.classList.remove('active');
-				answer.setAttribute('aria-hidden', 'true');
-				if (svg) {
-					svg.classList.remove('active');
-				}
-				if (iconImage) {
-					iconImage.classList.remove('image-icon-active');
-				}
-			}
-		});
-	});
-}

package/components/component-accordion-v3/accordion-v3.scss

@@ -1,189 +0,0 @@
-// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
-@use '../core-mixins-v3/core-mixins-v3';
-@use '../core-functions-v3/core-functions-v3';
-@use '../../breakpoints';
-
-@mixin accordion-v3() {
-	&__accordion-v3 {
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-		gap: core-functions-v3.fluidSize(var(--title-gap), 'mobile');
-		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-			gap: core-functions-v3.fluidSize(var(--title-gap), 'portrait');
-		}
-		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-			gap: core-functions-v3.fluidSize(var(--title-gap), 'desktop');
-		}
-	}
-
-	&__accordion-wrapper {
-		text-align: initial;
-		background: var(--background-color);
-		border-radius: 4px;
-	}
-
-	&__accordion-question-wrapper {
-		cursor: pointer;
-		place-items: flex-start;
-		button {
-			width: 100%;
-			align-items: center;
-			cursor: pointer;
-			background: unset;
-			padding: unset;
-			border: unset;
-			color: var(--title-color);
-		}
-	}
-
-	&__accordion-image-wrapper {
-		grid-area: icon;
-		width: core-functions-v3.fluidSize(var(--image-icon-size), 'mobile');
-
-		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-			width: core-functions-v3.fluidSize(
-				var(--image-icon-size),
-				'portrait'
-			);
-		}
-
-		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-			width: core-functions-v3.fluidSize(
-				var(--image-icon-size),
-				'desktop'
-			);
-		}
-
-		img {
-			width: 100%;
-		}
-	}
-
-	&__accordion-question {
-		text-align: left;
-		display: grid;
-		grid-template:
-			'question icon'
-			'answer ...' / auto min-content;
-		&--icon-left {
-			grid-template:
-				'icon question'
-				'... answer' / min-content auto;
-			column-gap: core-functions-v3.fluidSize(20, 'static');
-		}
-	}
-
-	&__accordion-answer-wrapper {
-		overflow: hidden;
-		height: 0;
-		grid-area: answer;
-
-		p {
-			color: var(--text-color);
-			padding-block: core-functions-v3.fluidSize(
-				var(--text-padding-horizontal),
-				'mobile'
-			);
-
-			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-				padding-block: core-functions-v3.fluidSize(
-					var(--text-padding-horizontal),
-					'portrait'
-				);
-			}
-
-			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-				padding-block: core-functions-v3.fluidSize(
-					var(--text-padding-horizontal),
-					'desktop'
-				);
-			}
-		}
-	}
-
-	&__accordion-answer {
-		font-size: core-functions-v3.fontSize(22, 'static');
-		grid-column: 1/-1;
-		padding-bottom: core-functions-v3.fluidSize(20, 'mobile');
-		padding-top: core-functions-v3.fluidSize(20, 'mobile');
-
-		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-			padding-bottom: core-functions-v3.fluidSize(20, 'portrait');
-			padding-top: core-functions-v3.fluidSize(20, 'portrait');
-		}
-
-		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-			padding-bottom: core-functions-v3.fluidSize(20, 'desktop');
-			padding-top: core-functions-v3.fluidSize(20, 'desktop');
-		}
-
-		&:last-child {
-			padding-bottom: 0;
-		}
-	}
-
-	&__accordion-icon {
-		grid-area: icon;
-		background: var(--icon-background-color);
-		border-radius: 4px;
-		display: flex;
-		align-items: center;
-		height: core-functions-v3.fluidSize(50, 'static');
-		width: core-functions-v3.fluidSize(50, 'static');
-
-		&.active {
-			.standard-content-v3__accordion-animation {
-				&:before {
-					transform: rotate(90deg);
-				}
-
-				&:after {
-					transform: rotate(180deg);
-				}
-			}
-		}
-	}
-
-	.image-icon-active {
-		transform: rotate(var(--image-icon-rotation-deg));
-		transition: transform 0.3s ease;
-	}
-
-	:not(.image-icon-active, .lottie-animations *) {
-		transform: rotate(0deg);
-		transition: transform 0.3s ease;
-	}
-
-	&__accordion-animation {
-		height: core-functions-v3.fluidSize(20, 'static');
-		margin: auto;
-		position: relative;
-		transition: transform 0.3s ease;
-		width: core-functions-v3.fluidSize(20, 'static');
-
-		&:before,
-		&:after {
-			background-color: var(--title-color);
-			content: '';
-			position: absolute;
-			transition: transform 0.25s ease-out;
-		}
-
-		&:before {
-			height: 100%;
-			left: 50%;
-			margin-left: -1px;
-			top: 0;
-			width: 2px;
-		}
-
-		&:after {
-			height: 2px;
-			left: 0;
-			margin-top: -1px;
-			top: 50%;
-			width: 100%;
-		}
-	}
-}

package/components/component-accordion-v3/accordion-v3.twig

@@ -1,39 +0,0 @@
-{% set titleColor = '--title-color: ' ~ fields.accordion_title.title_color ~ ';' %}
-{% set textColor = '--text-color: ' ~ fields.accordion_text.text_color ~ ';' %}
-{% set backgroundColor = '--background-color: ' ~ fields.accordion_title.background_color ~ ';' %}
-{% set iconBackgroundColor = '--icon-background-color: ' ~ fields.accordion_title.icon_background_color ~ ';' %}
-{% set textPaddingHorizontal = '--text-padding-horizontal: ' ~ fields.accordion_text.text_padding_horizontal ~ ';' %}
-{% set titleGap = '--title-gap: ' ~ fields.accordion_title.title_gap ~ ';' %}
-{% set enableCustomIcon = fields.accordion_title.enable_custom_icon %}
-{% set imageIcon = get_image(fields.accordion_title.image_icon) %}
-{% set imageIconSize = '--image-icon-size: ' ~ fields.accordion_title.imge_icon_size ~ ';' %}
-{% set imageIconRotationDeg = '--image-icon-rotation-deg: ' ~ fields.accordion_title.image_icon_rotation_deg ~ 'deg;' %}
-
-{% set sectionStyles = titleColor ~ textColor ~ backgroundColor ~ iconBackgroundColor ~ textPaddingHorizontal ~ titleGap ~ imageIconSize ~ imageIconRotationDeg %}
-
-<div {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{ blockClassName }}__accordion-v3" style="{{sectionStyles}}">
-
-	{% for accordion in fields.accordion_content %}
-		<div class="{{ blockClassName }}__accordion-wrapper">
-			<div class="{{ blockClassName }}__accordion-content">
-				<h3 class="{{ blockClassName }}__accordion-question-wrapper">
-					<button class="{{ blockClassName }}__accordion-question {{ fields.accordion_title.title_element_style | ru }} {{ blockClassName }}__accordion-question--{{ fields.icon_horizontal_align|ru }} ">{{ accordion.accordion_title }}
-						{% if enableCustomIcon %}
-							<div class="{{ blockClassName }}__accordion-image-wrapper">
-								<img class="{{ blockClassName }}__accordion-image-icon" src="{{imageIcon.src}}" alt="{{imageIcon.alt}}" width="{{imageIcon.width}}" height="{{imageIcon.height}}">
-							</div>
-						{% else %}
-							<div class="{{ blockClassName }}__accordion-icon">
-								<div class="{{ blockClassName }}__accordion-animation"></div>
-							</div>
-						{% endif %}
-						<div class="{{ blockClassName }}__accordion-answer-wrapper" aria-hidden="true">
-							{{ accordion.accordion_text }}
-						</div>
-
-					</button>
-				</h3>
-			</div>
-		</div>
-	{% endfor %}
-</div>