@total_onion/onion-library 3.2.0 → 3.2.2

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

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

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

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

@@ -0,0 +1,220 @@
+{
+    "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

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

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

@@ -0,0 +1,39 @@
+{% 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>