@total_onion/onion-library 1.0.0

package/components/block-sub-group-container/sub-group-container-extra.scss

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

package/components/block-sub-group-container/sub-group-container.js

@@ -0,0 +1,9 @@
+// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
+export default function subgroupcontainerJs(options = {}) {
+	// try {
+	// 	const {block} = options;
+	// 	loadCss(block.dataset.assetkey, options).then(() => {});
+	// } catch (error) {
+	// 	console.error(error);
+	// }
+}

package/components/block-sub-group-container/sub-group-container.php

@@ -0,0 +1,14 @@
+<?php
+
+acf_register_block_type(
+	array(
+		'name'            => 'sub-group-container',
+		'title'           => __('Sub group container', 'Global-theme Admin'),
+		'render_callback' => 'athena_block_render_post_object',
+		'category'        => 'common',
+		'icon'            => get_svg_icon_content('brick.svg'),
+		'keywords'        => array('content', 'text'),
+		'mode'            => 'preview',
+		'supports'        => array('align' => false, 'anchor' => true),
+	)
+);

package/components/block-sub-group-container/sub-group-container.scss

@@ -0,0 +1,26 @@
+// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
+@use 'Assets/scss/modules/library-modules/grid-layout-element/grid-layout-element';
+@use 'Assets/scss/modules/library-modules/grid-layout-container/grid-layout-container';
+@use 'Assets/scss/modules/library-modules/responsive-image/responsive-image';
+// @use 'Assets/scss/modules/library-modules/animations/animations';
+@use 'Assets/scss/blocks/sub-group-container/sub-group-container-extra';
+@use 'Assets/scss/modules/library-modules/cover-link/cover-link';
+.sub-group-container {
+	@include responsive-image.responsiveImage();
+	// @include animations.animations();
+	@include cover-link.coverLink();
+
+	display: grid;
+	grid-template: 'main' / 1fr;
+	place-items: center;
+	&__grid-container {
+		grid-area: main;
+		place-self: stretch;
+		@include grid-layout-container.gridLayoutContainer();
+	}
+	&__block-container {
+		@include grid-layout-element.gridLayoutElement();
+		z-index: 5;
+	}
+	@include sub-group-container-extra.additionalStyles();
+}

package/components/block-sub-group-container/sub-group-container.twig

@@ -0,0 +1,42 @@
+{# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
+{% set blockClassName = "sub-group-container" %}
+{% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields, block }, with_context = false) %}
+{% set htmlEntryPoint = include('entry-points/entry-point-html.twig', { fields, block, blockClassName, options, cta_styles, environment, is_preview, nav_menus }, with_context = false) %}
+{% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields, block }, with_context = false) %}
+{% set styleEntryPoint = include('entry-points/entry-point-style.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
+{% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
+{% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields: fields, block: block, displaytype: displaytype, is_preview: is_preview }, with_context = false) %}
+
+{% set backgroundColour = '--section-background-colour: ' ~ fields.background_colour ~ ';' %}
+
+{% set gridLayoutContainer = include('components/grid-layout-container.twig') %}
+{% set gridGapMults = include('components/grid-gap-mults.twig') %}
+{% set blockElementType = fields.block_element_type|default('section')|ru %}
+
+{% set sectionStyles =  styleEntryPoint ~ backgroundColour ~ gridGapMults ~ gridLayoutContainer ~ containerOverflowType ~ blockPosition %}
+
+{{previewEntryPoint}}
+<style>
+	.{{blockClassName}}.{{block.id}}{
+		{{sectionStyles}}
+	}
+</style>
+<{{blockElementType}} {{block.anchor ? "id=" ~ block.anchor : ''}} class="sub-group-container {{blockClassName}} {{block.className}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-jsload="false" data-assetkey="sub-group-container">
+	<div class="{{blockClassName}}__grid-container">
+		{% for section in fields.sections %}
+			{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: section, block: block }, with_context = false) %}
+			{% if block %}
+				{% set block = block|merge({'anchor' : '','className' : '', 'id': block.id ~ '-' ~ loop.index }) %}
+			{% endif %}
+			<style>
+				.{{blockClassName}}__block-container.{{block.id}}{
+					{{gridLayoutElement}}
+				}
+			</style>
+			<div class="{{blockClassName}}__block-container {{block.id}}">
+				{{ include('blocks/' ~ (section.acf_fc_layout|replace({ '_': '-' })) ~ '.twig', { fields: section, options, block, is_preview, current, nav_menus, site, cta_styles, market_settings, languages }, with_context = false, ignore_missing = true) }}
+			</div>
+		{% endfor %}
+	</div>
+	{{htmlEntryPoint}}
+</{{blockElementType}}>