@total_onion/onion-library 1.0.94 → 1.0.97

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

@@ -1,34 +1,26 @@
 {# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
 {% set blockClassName = "group-container-v3" %}
-{% if fields and fields.block_overflow is not defined %}
-	{% set fields = fields|merge({ 'block_overflow': false }) %}
-{% endif %}
 {% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields, block }, with_context = false) %}
 {% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields, block, blockClassName, options, environment, is_preview, nav_menus, cta_styles }, 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) %}
-{% if not fields.block_background_colour and fields.background_colour is not empty %}
-	{% set fallbackBackgroundColour = '--block-background-colour: ' ~ fields.background_colour ~ ';' %}
-{% endif %}
-{% set layoutType = fields.layout_type|ru %}
 
+{% set layoutType = fields.layout_type|ru %}
 {% set layoutStyles = '' %}
 {% if layoutType == 'flex' %}
-	{% set layoutStyles = include('components/flex-layout-container.twig') %}
+	{% set layoutStyles = include('components/flex-layout-container-v3.twig') %}
 	{% set layoutClass = 'flex-layout-container' %}
 {% elseif layoutType == 'grid' %}
-	{% set layoutStyles = include('components/grid-layout-container.twig') %}
+	{% set layoutStyles = include('components/grid-layout-container-v3.twig') %}
 	{% set layoutClass = 'grid-layout-container' %}
 {% endif %}
-
 {% set gridGapMults = include('components/grid-gap-mults.twig') %}
 {% set blockElementType = fields.block_element_type|default('section')|ru %}
 {% set imageSizes = '(min-width: 1440px) ' ~ (100 / fields.grid_columns_desktop|default(1))|round ~ 'vw, (min-width: 1024px) ' ~ (100 / fields.grid_columns_desktop|default(1))|round ~ 'vw, (min-width: 768px) ' ~ (100 / fields.grid_columns_portrait|default(1))|round ~ 'vw, (min-width: 300px) ' ~(100 / fields.grid_columns_mobile|default(1))|round ~ 'vw, 100vw' %}
 
 {% set sectionStyles =  styleEntryPoint ~ fallbackBackgroundColour ~ gridGapMults ~ containerOverflowType ~ blockPosition %}
 
-
 {{previewEntryPoint}}
 <style>
 	.{{blockClassName}}.{{block.id}}{
@@ -49,7 +41,7 @@
 	<div class="group-container-v3__grid-container {{layoutClass}} {{block.id}}">
 
 		{% for section in fields.sections %}
-			{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: section, block }, with_context = false) %}
+			{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: section, block }, with_context = false) %}
 			{% if block %}
 				{% set block = block|merge({'anchor' : '','className' : '', 'id': block.id ~ '-' ~ loop.index }) %}
 			{% endif %}

package/components/component-flex-layout-container-v3/flex-layout-container-v3.twig

@@ -0,0 +1,32 @@
+{% set flexDirectionDesktop = '--flex-direction-desktop: ' ~ fields.flex_layout.flex_direction_desktop|ru|default('row') ~ ';' %}
+{% set flexDirectionPortrait = '--flex-direction-portrait: ' ~ fields.flex_layout.flex_direction_portrait|ru|default('row') ~ ';' %}
+{% set flexDirectionMobile = '--flex-direction-mobile: ' ~ fields.flex_layout.flex_direction_mobile|ru|default('row') ~ ';' %}
+
+{% set flexWrapDesktop = '--flex-wrap-desktop: ' ~ fields.flex_layout.flex_wrap_desktop|ru|default('nowrap') ~ ';' %}
+{% set flexWrapPortrait = '--flex-wrap-portrait: ' ~ fields.flex_layout.flex_wrap_portrait|ru|default('nowrap') ~ ';' %}
+{% set flexWrapMobile = '--flex-wrap-mobile: ' ~ fields.flex_layout.flex_wrap_mobile|ru|default('nowrap') ~ ';' %}
+
+{% set displayType = '--display-type: ' ~ 'flex' ~ ';' %}
+
+{% set flexDirection = flexDirectionDesktop ~ flexDirectionPortrait ~ flexDirectionMobile %}
+{% set flexWrap = flexWrapDesktop ~ flexWrapPortrait ~ flexWrapMobile %}
+
+{% set justifyContentDesktop = '--justify-content-desktop: ' ~ fields.flex_layout.justify_content_desktop|ru|default('flex-start') ~ ';' %}
+{% set justifyContentPortrait = '--justify-content-portrait: ' ~ fields.flex_layout.justify_content_portrait|ru|default('flex-start') ~ ';' %}
+{% set justifyContentMobile = '--justify-content-mobile: ' ~ fields.flex_layout.justify_content_mobile|ru|default('flex-start') ~ ';' %}
+
+{% set justifyContent = justifyContentDesktop ~ justifyContentPortrait ~ justifyContentMobile %}
+{% set flexDirection = flexDirection ~ flexWrap ~ justifyContentDesktop ~ justifyContentPortrait ~ justifyContentMobile %}
+{% set alignItemsDesktop = '--align-items-desktop: ' ~ fields.flex_layout.align_items_desktop|ru|default('flex-start') ~ ';' %}
+{% set alignItemsPortrait = '--align-items-portrait: ' ~ fields.flex_layout.align_items_portrait|ru|default('flex-start') ~ ';' %}
+{% set alignItemsMobile = '--align-items-mobile: ' ~ fields.flex_layout.align_items_mobile|ru|default('flex-start') ~ ';' %}
+
+{% set alignItems = alignItemsDesktop ~ alignItemsPortrait ~ alignItemsMobile %}
+
+{% set gapDesktop = '--gap-desktop: ' ~ fields.flex_layout.gap_desktop|ru|default('0px') ~ ';' %}
+{% set gapPortrait = '--gap-portrait: ' ~ fields.flex_layout.gap_portrait|ru|default('0px') ~ ';' %}
+{% set gapMobile = '--gap-mobile: ' ~ fields.flex_layout.gap_mobile|ru|default('0px') ~ ';' %}
+
+{% set gap = gapDesktop ~ gapPortrait ~ gapMobile %}
+
+{{flexDirection ~ flexWrap ~ justifyContent ~ alignItems ~ gap ~ displayType}}

package/components/component-grid-layout-container-v3/grid-layout-container-v3.twig

@@ -0,0 +1,34 @@
+{% set gridColumnsDesktop = '--grid-template-columns-custom-desktop: repeat(' ~ fields.grid_layout.grid_columns_desktop|default(1) ~ ', 1fr);' %}
+{% set gridColumnsPortrait = '--grid-template-columns-custom-portrait: repeat(' ~ fields.grid_layout.grid_columns_portrait|default(1) ~ ', 1fr);' %}
+{% set gridColumnsMobile = '--grid-template-columns-custom-mobile: repeat(' ~ fields.grid_layout.grid_columns_mobile|default(1) ~ ', 1fr);' %}
+{% set gridAutoFlowDesktop = '--grid-auto-flow-desktop: ' ~ fields.grid_layout.grid_auto_flow_desktop|ru ~ ';' %}
+{% set gridAutoFlowMobile = '--grid-auto-flow-mobile: ' ~ fields.grid_layout.grid_auto_flow_mobile|ru ~ ';' %}
+{% set containerOverflowType = '--container-overflow-type: ' ~ fields.grid_layout.container_overflow_type|ru ~ ';' %}
+{% set gridAutoColumns = '--grid-auto-columns: ' ~ fields.grid_layout.grid_auto_columns|ru ~ ';' %}
+
+{% if fields.grid_layout.grid_auto_columns|ru == 'custom' %}
+	{% set gridAutoColumns = '--grid-auto-columns-custom: ' ~ fields.grid_layout.grid_auto_columns_custom_width ~ ';' %}
+{% endif %}
+{% if fields.grid_layout.grid_template_columns_custom_desktop is not empty %}
+	{% set gridColumnsDesktop = '--grid-template-columns-custom-desktop: ' ~ fields.grid_layout.grid_template_columns_custom_desktop ~ ';' %}
+{% endif %}
+{% if fields.grid_layout.grid_template_columns_custom_portrait is not empty %}
+	{% set gridColumnsPortrait = '--grid-template-columns-custom-portrait: ' ~ fields.grid_layout.grid_template_columns_custom_portrait ~ ';' %}
+{% endif %}
+{% if fields.grid_layout.grid_template_columns_custom_mobile is not empty %}
+	{% set gridColumnsMobile = '--grid-template-columns-custom-mobile: ' ~ fields.grid_layout.grid_template_columns_custom_mobile ~ ';' %}
+{% endif %}
+{% if fields.grid_layout.grid_template_rows_custom_desktop is not empty %}
+	{% set gridTemplateRowsCustomDesktop = '--grid-template-rows-custom-desktop: ' ~ fields.grid_layout.grid_template_rows_custom_desktop ~ ';' %}
+{% endif %}
+{% if fields.grid_layout.grid_template_rows_custom_portrait is not empty %}
+	{% set gridTemplateRowsCustomPortrait = '--grid-template-rows-custom-portrait: ' ~ fields.grid_layout.grid_template_rows_custom_portrait ~ ';' %}
+{% endif %}
+{% if fields.grid_layout.grid_template_rows_custom_mobile is not empty %}
+	{% set gridTemplateRowsCustomMobile = '--grid-template-rows-custom-mobile: ' ~ fields.grid_layout.grid_template_rows_custom_mobile ~ ';' %}
+{% endif %}
+{% set displayType = '--display-type: grid;' %}
+{% set gridLayoutContainer = displayType ~ gridColumnsDesktop ~ gridColumnsPortrait ~ gridColumnsMobile ~ gridAutoFlowDesktop ~ gridAutoFlowMobile ~ containerOverflowType ~ gridAutoColumns ~ gridTemplateRowsCustomDesktop ~ gridTemplateRowsCustomPortrait ~ gridTemplateRowsCustomMobile %}
+
+
+{{gridLayoutContainer}}

package/components/component-grid-layout-element-v3/grid-layout-element-v3.twig

@@ -0,0 +1,20 @@
+{% set gridColumnStart = '--grid-column-start:' ~ fields.grid_layout_element.grid_column_start ~ ';' %}
+{% set gridColumnSpan = '--grid-column-span:' ~ fields.grid_layout_element.grid_column_span ~ ';' %}
+{% set gridRowStart = '--grid-row-start:' ~ fields.grid_layout_element.grid_row_start ~ ';' %}
+{% set gridRowSpan = '--grid-row-span:' ~ fields.grid_layout_element.grid_row_span ~ ';' %}
+{% set gridColumnStartPortrait = '--grid-column-start-portrait:' ~ fields.grid_layout_element.grid_column_start_portrait|default(fields.grid_layout_element.grid_column_start_mobile) ~ ';' %}
+{% set gridColumnSpanPortrait = '--grid-column-span-portrait:' ~ fields.grid_layout_element.grid_column_span_portrait|default(fields.grid_layout_element.grid_column_span_mobile) ~ ';' %}
+{% set gridRowStartPortrait = '--grid-row-start-portrait:' ~ fields.grid_layout_element.grid_row_start_portrait|default(fields.grid_layout_element.grid_row_start_mobile) ~ ';' %}
+{% set gridRowSpanPortrait = '--grid-row-span-portrait:' ~ fields.grid_layout_element.grid_row_span_portrait|default(fields.grid_layout_element.grid_row_span_mobile) ~ ';' %}
+{% set gridColumnStartMobile = '--grid-column-start-mobile:' ~ fields.grid_layout_element.grid_column_start_mobile ~ ';' %}
+{% set gridColumnSpanMobile = '--grid-column-span-mobile:' ~ fields.grid_layout_element.grid_column_span_mobile ~ ';' %}
+{% set gridRowStartMobile = '--grid-row-start-mobile:' ~ fields.grid_layout_element.grid_row_start_mobile ~ ';' %}
+{% set gridRowSpanMobile = '--grid-row-span-mobile:' ~ fields.grid_layout_element.grid_row_span_mobile ~ ';' %}
+{% set gridVerticalPlacement = '--grid-vertical-placement-desktop:' ~  fields.grid_layout_element.grid_vertical_placement|ru ~ ';' %}
+{% set gridHorizontalPlacement = '--grid-horizontal-placement-desktop:' ~  fields.grid_layout_element.grid_horizontal_placement|ru ~ ';' %}
+{% set gridHorizontalPlacementPortrait = '--grid-horizontal-placement-portrait:' ~ ((fields.grid_layout_element.grid_layout_portrait.grid_horizontal_placement_portrait == '__default') ? fields.grid_layout_element.grid_horizontal_placement|ru : fields.grid_layout_element.grid_layout_portrait.grid_horizontal_placement_portrait|ru) ~ ';' %}
+{% set gridVerticalPlacementPortrait = '--grid-vertical-placement-portrait:' ~ ((fields.grid_layout_element.grid_layout_portrait.grid_vertical_placement_portrait == '__default') ? fields.grid_layout_element.grid_vertical_placement|ru : fields.grid_layout_element.grid_layout_portrait.grid_vertical_placement_portrait|ru) ~ ';' %}
+{% set gridHorizontalPlacementMobile = '--grid-horizontal-placement-mobile:' ~ ((fields.grid_layout_element.grid_layout_mobile.grid_horizontal_placement_mobile == '__default') ? fields.grid_layout_element.grid_horizontal_placement|ru : fields.grid_layout_element.grid_layout_mobile.grid_horizontal_placement_mobile|ru) ~ ';' %}
+{% set gridVerticalPlacementMobile = '--grid-vertical-placement-mobile:' ~ ((fields.grid_layout_element.grid_layout_mobile.grid_vertical_placement_mobile == '__default') ? fields.grid_layout_element.grid_vertical_placement|ru : fields.grid_layout_element.grid_layout_mobile.grid_vertical_placement_mobile|ru) ~ ';' %}
+{% set gridLayoutElement = gridColumnStartMobile ~ gridColumnSpanMobile ~ gridRowStartMobile ~ gridRowSpanMobile ~ gridColumnStartPortrait ~ gridColumnSpanPortrait ~ gridRowStartPortrait ~ gridRowSpanPortrait ~ gridColumnStart ~ gridColumnSpan ~ gridRowStart ~ gridRowSpan ~ gridHorizontalPlacement ~ gridVerticalPlacement ~ gridHorizontalPlacementPortrait ~ gridVerticalPlacementPortrait ~ gridHorizontalPlacementMobile ~ gridVerticalPlacementMobile %}
+{{gridLayoutElement}}

package/createNewBlock.js

@@ -4,7 +4,6 @@ const { globSync } = require('glob');
 const yargs = require('yargs');
 const {exec} = require('child_process');
 const swiperTemplates = require('./new-block-templates/template-swiper');
-// const cypressJs = require('./new-block-templates/template-cypress');
 const vueTemplates = require('./new-block-templates/template-vue');
 const acfTemplate = require('./new-block-templates/template-acf');
 const defaultTemplates = require('./new-block-templates/template-default');
@@ -88,7 +87,7 @@ const contentContainerTemplate = `
 const templateData = `
 {% set blockClassName = "${newBlockName}" %}
 {% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields: fields, block: block }, with_context = false) %}
-{% set htmlEntryPoint = include('entry-points/entry-point-html.twig', { fields: fields, block: block, blockClassName, blockClassName }, with_context = false) %}
+{% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields: fields, block: block, blockClassName, blockClassName }, with_context = false) %}
 {% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields: fields, block: block }, with_context = false) %}
 {% set styleEntryPoint = include('entry-points/entry-point-style.twig', { fields: fields, block: block, is_preview }, with_context = false) %}
 {% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
@@ -96,7 +95,12 @@ const templateData = `
 {% set sectionStyles =  styleEntryPoint %}
 
 {{previewEntryPoint}}
-<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}} lazy-fade" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" style="{{sectionStyles}}" data-assetkey="{{blockClassName}}">
+<style>
+	.{{blockClassName}}.{{block.id}}{
+		{{sectionStyles}}
+	}
+</style>
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
 	${swiper ? swiperTemplates.templatetwig(newBlockName) : ''}${
 	image ? imageTemplate : ''
 }

package/new-block-templates/template-default.js

@@ -12,8 +12,8 @@ module.exports = {
 }`;
 	},
 	defaultscss: function (newBlockName) {
-		return `// @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins'; 
-// @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
+		return `// @use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3'; 
+// @use 'Assets/scss/modules/library-modules/core-functions-v3/core-functions-v3';
 // @use 'Assets/scss/theme/breakpoints';
 @use 'Assets/scss/blocks/${newBlockName}/${newBlockName}-extra';
 .${newBlockName} {
@@ -21,8 +21,8 @@ module.exports = {
 }`;
 	},
 	defaultextrascss: function (newBlockName) {
-		return `@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins'; 
-@use 'Assets/scss/modules/library-modules/core-functions/core-functions';
+		return `@use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3'; 
+@use 'Assets/scss/modules/library-modules/core-functions-v3/core-functions-v3';
 @use 'Assets/scss/theme/breakpoints';
 @mixin additionalStyles() {
 	

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@total_onion/onion-library",
-	"version": "1.0.94",
+	"version": "1.0.97",
 	"description": "Component library",
 	"main": "index.js",
 	"scripts": {

package/new-block-templates/template-cypress.js

@@ -1,9 +0,0 @@
-module.exports = function (newBlockName) {
-    return `describe('${newBlockName}', () => {
-	it('Gets, types and asserts', () => {
-		cy.visit('/_block-reference');
-		cy.get('.${newBlockName}');
-	});
-});
-`;
-}