@total_onion/onion-library 1.0.0

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

@@ -0,0 +1,183 @@
+// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
+@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
+@use 'Assets/scss/modules/library-modules/core-functions/core-functions';
+@use 'Assets/scss/theme/breakpoints';
+
+@mixin accordion-v3() {
+	&__accordion-v3 {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: core-functions.fluidSize(var(--title-gap), 'mobile');
+		@include core-mixins.device(breakpoints.$tabPortrait) {
+			gap: core-functions.fluidSize(var(--title-gap), 'portrait');
+		}
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			gap: core-functions.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.fluidSize(var(--image-icon-size), 'mobile');
+
+		@include core-mixins.device(breakpoints.$tabPortrait) {
+			width: core-functions.fluidSize(var(--image-icon-size), 'portrait');
+		}
+
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			width: core-functions.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.fluidSize(20, 'static');
+		}
+	}
+
+	&__accordion-answer-wrapper {
+		overflow: hidden;
+		height: 0;
+		grid-area: answer;
+
+		p {
+			color: var(--text-color);
+			padding-block: core-functions.fluidSize(
+				var(--text-padding-horizontal),
+				'mobile'
+			);
+
+			@include core-mixins.device(breakpoints.$tabPortrait) {
+				padding-block: core-functions.fluidSize(
+					var(--text-padding-horizontal),
+					'portrait'
+				);
+			}
+
+			@include core-mixins.device(breakpoints.$tabLandscape) {
+				padding-block: core-functions.fluidSize(
+					var(--text-padding-horizontal),
+					'desktop'
+				);
+			}
+		}
+	}
+
+	&__accordion-answer {
+		font-size: core-functions.fontSize(22, 'static');
+		grid-column: 1/-1;
+		padding-bottom: core-functions.fluidSize(20, 'mobile');
+		padding-top: core-functions.fluidSize(20, 'mobile');
+
+		@include core-mixins.device(breakpoints.$tabPortrait) {
+			padding-bottom: core-functions.fluidSize(20, 'portrait');
+			padding-top: core-functions.fluidSize(20, 'portrait');
+		}
+
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			padding-bottom: core-functions.fluidSize(20, 'desktop');
+			padding-top: core-functions.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.fluidSize(50, 'static');
+		width: core-functions.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.fluidSize(20, 'static');
+		margin: auto;
+		position: relative;
+		transition: transform 0.3s ease;
+		width: core-functions.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>