@total_onion/onion-library 1.0.3 → 1.0.5

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

@@ -1,6 +0,0 @@
-// @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 additionalStyles() {
-}

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

@@ -1,61 +0,0 @@
-@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';
-@use 'Assets/scss/modules/library-modules/accent-text/accent-text-extra';
-
-@mixin accent-text() {
-	&__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.fluidSize(10);
-		margin-inline: core-functions.fluidSize(5, 'mobile');
-		font-size: core-functions.fontSize(10, 'mobile');
-
-		@include core-mixins.device(breakpoints.$tabPortrait) {
-			font-size: core-functions.fontSize(10, 'portrait');
-			margin-inline: core-functions.fluidSize(5, 'portrait');
-			gap: core-functions.fluidSize(20, 'portrait');
-		}
-
-		@include core-mixins.device(breakpoints.$tabLandscape) {
-			color: var(--accent-text-colour);
-			font-size: core-functions.fontSize(10, 'desktop');
-			margin-inline: core-functions.fluidSize(5, 'desktop');
-			gap: core-functions.fluidSize(20, 'desktop');
-		}
-
-		&::before,
-		&::after {
-			content: '';
-			background-color: var(
-				--accent-text-colour-mobile,
-				var(--default-text-colour-mobile)
-			);
-			width: core-functions.fluidSize(20, 'mobile');
-			height: core-functions.fluidSize(2, 'mobile');
-
-			@include core-mixins.device(breakpoints.$tabPortrait) {
-				width: core-functions.fluidSize(40, 'portrait');
-				height: core-functions.fluidSize(2, 'portrait');
-			}
-
-			@include core-mixins.device(breakpoints.$tabLandscape) {
-				background-color: var(
-					--accent-text-colour,
-					var(--default-text-colour-desktop)
-				);
-				width: core-functions.fluidSize(80, 'desktop');
-				height: core-functions.fluidSize(2, 'desktop');
-			}
-		}
-
-		@include accent-text-extra.additionalStyles();
-	}
-}

package/components/component-accent-text/accent-text.twig

@@ -1,11 +0,0 @@
-{# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
-
-{% if fields.accent_text_colour %}
-	{% set accentTextColour = '--accent-text-colour: ' ~ fields.accent_text_colour ~ ';' %}
-	{% set accentTextColourMobile = '--accent-text-colour-mobile: ' ~ fields.accent_text_colour_mobile|default(fields.accent_text_colour) ~ ';' %}
-{% endif %}
-
-{% set alignment = '--alignment: ' ~ fields.alignment|ru ~ ';' %}
-{% set elementStyles = accentTextColour ~ accentTextColourMobile ~ alignment  %}
-
-<div class="{{ blockClassName|default('accent-text') }}__accent-text accent-text" style="{{elementStyles}}">{{fields.text_content}}</div>

package/components/component-accordion-v2/accordion-v2-extra.scss

@@ -1,6 +0,0 @@
-// @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 additionalStyles() {
-}

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

@@ -1,113 +0,0 @@
-export default function accordionV2Js(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-v2/accordion-v2.scss

@@ -1,172 +0,0 @@
-// 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';
-@use 'Assets/scss/modules/library-modules/accordion-v2/accordion-v2-extra';
-
-
-@mixin accordion-v2() {
-	&__accordion-v2 {
-		width: 100%;
-	}
-
-	&__accordion-wrapper {
-		text-align: initial;
-		background: var(--background-colour);
-		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(--text-colour);
-		}
-	}
-
-	&__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 {
-			padding-top: core-functions.fluidSize(
-				var(--accordion-text-padding-top),
-				'mobile'
-			);
-
-			@include core-mixins.device(breakpoints.$tabPortrait) {
-				padding-top: core-functions.fluidSize(
-					var(--accordion-text-padding-top),
-					'portrait'
-				);
-			}
-
-			@include core-mixins.device(breakpoints.$tabLandscape) {
-				padding-top: core-functions.fluidSize(
-					var(--accordion-text-padding-top),
-					'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-colour);
-		border-radius: 4px;
-		display: flex;
-		align-items: center;
-		height: core-functions.fluidSize(50, 'static');
-		width: core-functions.fluidSize(50, 'static');
-
-		&.active {
-			.standard-content-v2__accordion-animation {
-				&:before {
-					transform: rotate(90deg);
-				}
-
-				&:after {
-					transform: rotate(180deg);
-				}
-			}
-		}
-	}
-
-	.image-icon-active {
-		transform: unset;
-		transform: rotate(var(--image-icon-rotation-deg));
-		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(--text-colour);
-			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%;
-		}
-	}
-	@include accordion-v2-extra.additionalStyles();
-}

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

@@ -1,38 +0,0 @@
-{# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
-{% set backgroundColour = '--background-colour: ' ~ fields.background_colour ~ ';' %}
-{% set textColour = '--text-colour: ' ~ fields.text_colour ~ ';' %}
-{% set iconBackgroundColour = '--icon-background-colour: ' ~ fields.icon_background_colour ~ ';' %}
-{% set accordionTextPaddingTop = '--accordion-text-padding-top: ' ~ fields.accordion_text_padding_top ~ ';' %}
-{% set ImageIconSize = '--image-icon-size: ' ~ fields.image_icon_size ~ ';' %}
-{% set ImageIconRotationDeg = '--image-icon-rotation-deg: ' ~ fields.image_icon_rotation_deg ~ 'deg;' %}
-{% set enableCustomIcon = fields.enable_custom_icon %}
-{% set imageIcon = get_image(fields.image_icon) %}
-{% set sectionStyles =  backgroundColour ~ textColour ~ iconBackgroundColour ~ iconHorizontalAlign ~ accordionTextPaddingTop ~ ImageIconSize ~ ImageIconRotationDeg %}
-
-<style>
-	.{{blockClassName}}__accordion-v2.{{block.id}}{
-		{{sectionStyles}}
-	}
-</style>
-<div {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{ blockClassName }}__accordion-v2 {{block.id}}">
-	<div class="{{ blockClassName }}__accordion-wrapper">
-		<div class="{{ blockClassName }}__accordion-content">
-			<h3 class="{{ blockClassName }}__accordion-question-wrapper">
-				<button class="{{ blockClassName }}__accordion-question {{ fields.title_element_style | ru }} {{ blockClassName }}__accordion-question--{{ fields.icon_horizontal_align|ru }} ">{{ fields.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">
-						{{ fields.accordion_text }}
-					</div>
-				</button>
-			</h3>
-		</div>
-	</div>
-</div>