@total_onion/onion-library 3.2.0 → 3.2.1

package/components/component-nav-menu-v3/group_68da703f710ff.json

@@ -0,0 +1,432 @@
+{
+    "key": "group_68da703f710ff",
+    "title": "Component: Nav Menu V3",
+    "fields": [
+        {
+            "key": "field_68da703f8e11e",
+            "label": "Menu",
+            "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_68da703f8e5d8",
+            "label": "Menu",
+            "name": "menu",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "choices": {
+                "__primary-menu": "Primary Menu",
+                "__secondary-menu": "Secondary Menu",
+                "__tertiary-menu": "Tertiary Menu",
+                "__legal-menu": "Legal Menu",
+                "__social-menu": "Social Menu",
+                "__footer-navigation-menu": "Footer Navigation Menu",
+                "__footer-navigation-menu-secondary": "Footer Navigation Menu Secondary",
+                "__footer-navigation-menu-tertiary": "Footer Navigation Menu Tertiary",
+                "__footer-navigation-menu-quaternary": "Footer Navigation Menu Quaternary"
+            },
+            "default_value": "__primary-menu",
+            "return_format": "value",
+            "multiple": 0,
+            "max": "",
+            "prepend": "",
+            "append": "",
+            "allow_null": 0,
+            "ui": 0,
+            "ajax": 0,
+            "placeholder": "",
+            "allow_custom": 0,
+            "search_placeholder": "",
+            "min": ""
+        },
+        {
+            "key": "field_68da703f8e998",
+            "label": "Cta style",
+            "name": "cta_style",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "choices": {
+                "1": "White text",
+                "2": "test"
+            },
+            "default_value": 1,
+            "return_format": "value",
+            "multiple": 0,
+            "max": "",
+            "allow_custom": 0,
+            "search_placeholder": "",
+            "prepend": "",
+            "append": "",
+            "allow_null": 0,
+            "ui": 1,
+            "ajax": 0,
+            "placeholder": "",
+            "min": ""
+        },
+        {
+            "key": "field_68da703f8ed81",
+            "label": "Alignment",
+            "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_68da703f8f167",
+            "label": "Alignment desktop",
+            "name": "alignment_desktop",
+            "aria-label": "",
+            "type": "radio",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "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_68da703f8f55a",
+            "label": "Alignment portrait",
+            "name": "alignment_portrait",
+            "aria-label": "",
+            "type": "radio",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "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_68da703f8f93e",
+            "label": "Alignment mobile",
+            "name": "alignment_mobile",
+            "aria-label": "",
+            "type": "radio",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "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_68da703f8fd2a",
+            "label": "Direction",
+            "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_68da703f90107",
+            "label": "Menu direction desktop",
+            "name": "menu_direction",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "50",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "choices": {
+                "__column": "Vertical",
+                "__row": "Horizontal"
+            },
+            "default_value": false,
+            "return_format": "value",
+            "multiple": 0,
+            "max": "",
+            "allow_custom": 0,
+            "search_placeholder": "",
+            "prepend": "",
+            "append": "",
+            "allow_null": 0,
+            "ui": 1,
+            "ajax": 0,
+            "placeholder": "",
+            "min": ""
+        },
+        {
+            "key": "field_68da703f90504",
+            "label": "Menu direction portrait",
+            "name": "menu_direction_portrait",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "50",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "choices": {
+                "__column": "Vertical",
+                "__row": "Horizontal"
+            },
+            "default_value": "__column",
+            "return_format": "value",
+            "multiple": 0,
+            "allow_custom": 0,
+            "search_placeholder": "",
+            "prepend": "",
+            "append": "",
+            "allow_null": 0,
+            "ui": 1,
+            "ajax": 0,
+            "placeholder": "",
+            "min": "",
+            "max": ""
+        },
+        {
+            "key": "field_68da703f908d7",
+            "label": "Menu direction mobile",
+            "name": "menu_direction_mobile",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "50",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "choices": {
+                "__column": "Vertical",
+                "__row": "Horizontal"
+            },
+            "default_value": "__column",
+            "return_format": "value",
+            "multiple": 0,
+            "max": "",
+            "allow_custom": 0,
+            "search_placeholder": "",
+            "prepend": "",
+            "append": "",
+            "allow_null": 0,
+            "ui": 1,
+            "ajax": 0,
+            "placeholder": "",
+            "min": ""
+        },
+        {
+            "key": "field_68da703f90cd4",
+            "label": "Gap",
+            "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_68da703f9109f",
+            "label": "Gap desktop",
+            "name": "gap_desktop",
+            "aria-label": "",
+            "type": "range",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "default_value": "0.25",
+            "min": "",
+            "max": "",
+            "step": "0.125",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_68da703f91461",
+            "label": "Gap portrait",
+            "name": "gap_portrait",
+            "aria-label": "",
+            "type": "range",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "default_value": "0.5",
+            "min": "",
+            "max": "",
+            "step": "0.125",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_68da703f91891",
+            "label": "Gap mobile",
+            "name": "gap_mobile",
+            "aria-label": "",
+            "type": "range",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "default_value": "0.5",
+            "min": "",
+            "max": "",
+            "step": "0.125",
+            "prepend": "",
+            "append": ""
+        }
+    ],
+    "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": 1759146069
+}

package/components/component-nav-menu-v3/nav-menu-v3.scss

@@ -0,0 +1,43 @@
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../../breakpoints';
+
+@mixin navMenuV3() {
+	&__nav-menu {
+		display: flex;
+		width: 100%;
+		justify-content: var(--alignment-mobile);
+		align-items: var(--alignment-mobile);
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			justify-content: var(--alignment-portrait);
+			align-items: var(--alignment-portrait);
+		}
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			justify-content: var(--alignment-desktop);
+		}
+	}
+	&__nav-menu-list {
+		list-style: none;
+		width: auto;
+		display: flex;
+		flex-wrap: wrap;
+		margin-bottom: unset;
+		flex-direction: var(--menu-direction-mobile);
+		align-items: var(--alignment-mobile);
+		gap: calc(var(--global-inline-spacing) * var(--gap-mobile));
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			gap: calc(var(--global-inline-spacing) * var(--gap-portrait));
+			flex-direction: var(--menu-direction-portrait);
+			align-items: var(--alignment-portrait);
+		}
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			align-items: var(--alignment-desktop);
+			gap: calc(var(--global-inline-spacing) * var(--gap-desktop));
+			flex-direction: var(--menu-direction);
+		}
+	}
+	&__nav-menu-list-item {
+		margin-bottom: unset;
+		line-height: unset;
+		letter-spacing: unset;
+	}
+}

package/components/component-nav-menu-v3/nav-menu-v3.twig

@@ -0,0 +1,75 @@
+{% set menudata = {} %}
+{% if fields.acf_fc_layout == 'nav_menu_v3' %}
+	{% if fields.menu|ru == 'primary-menu' %}
+		{% set menudata = menudata|merge({'menu' : options.nav_menus.primary_menu }) %}
+	{% endif %}
+	{% if fields.menu|ru == 'secondary-menu' %}
+		{% set menudata = menudata|merge({'menu' : options.nav_menus.secondary_menu }) %}
+	{% endif %}
+	{% if fields.menu|ru == 'tertiary-menu' %}
+		{% set menudata = menudata|merge({'menu' : options.nav_menus.tertiary_menu }) %}
+	{% endif %}
+	{% if fields.menu|ru == 'legal-menu' %}
+		{% set menudata = menudata|merge({'menu' : options.nav_menus.legal_menu }) %}
+	{% endif %}
+	{% if fields.menu|ru == 'social-menu' %}
+		{% set menudata = menudata|merge({'menu' : options.nav_menus.social_menu }) %}
+	{% endif %}
+	{% if fields.menu|ru == 'footer-navigation-menu' %}
+		{% set menudata = menudata|merge({'menu' : options.nav_menus.footer_navigation_menu }) %}
+	{% endif %}
+	{% if fields.menu|ru == 'footer-navigation-menu-secondary' %}
+		{% set menudata = menudata|merge({'menu' : options.nav_menus.footer_navigation_menu_secondary }) %}
+	{% endif %}
+	{% if fields.menu|ru == 'footer-navigation-menu-tertiary' %}
+		{% set menudata = menudata|merge({'menu' : options.nav_menus.footer_navigation_menu_tertiary }) %}
+	{% endif %}
+	{% if fields.menu|ru == 'footer-navigation-menu-quaternary' %}
+		{% set menudata = menudata|merge({'menu' : options.nav_menus.footer_navigation_menu_quaternary }) %}
+	{% endif %}
+{% endif %}
+
+{% set menu = menudata.menu %}
+{% set alignmentDesktop = '--alignment-desktop: ' ~ fields.alignment_desktop|ru ~ ';' %}
+{% set alignmentPortrait = '--alignment-portrait: ' ~ fields.alignment_portrait|ru ~ ';' %}
+{% set alignmentMobile = '--alignment-mobile: ' ~ fields.alignment_mobile|ru ~ ';' %}
+{% set alignment = alignmentDesktop ~ alignmentPortrait ~ alignmentMobile %}
+
+<nav class="{{blockClassName}}__nav-menu-v3 {{blockClassName}}__nav-menu--{{menu.name|lower}}" style="{{alignment}}">
+
+	{% set direction = '--menu-direction: ' ~ fields.menu_direction|ru ~ ';' %}
+	{% set directionPortrait = '--menu-direction-portrait: ' ~ fields.menu_direction_portrait|ru ~ ';' %}
+	{% set directionMobile = '--menu-direction-mobile: ' ~ fields.menu_direction_mobile|ru ~ ';' %}
+	{% set gapString = '--gap-mobile: ' ~ fields.gap_mobile ~ '; --gap-portrait: ' ~ fields.gap_portrait ~ '; --gap-desktop: ' ~ fields.gap_desktop ~ ';' %}
+	{% set styleString = direction ~ directionPortrait ~ directionMobile ~ gapString %}
+
+
+	{% if menu.items is defined and menu.items is not empty %}
+		<ul class="{{blockClassName}}__nav-menu-list" style="{{styleString}}">
+			{% for item in menu.items %}
+				<li class="{{ item.class }} {{blockClassName}}__nav-menu-list-item nav-menu__item">
+					<a class="{{blockClassName}}__nav-menu-link nav-menu__item-link {{blockClassName}}__nav-menu-link cmpl-cta-style-{{fields.cta_style|ru}}" target="{{item.target}}" href="{{item.url}}">
+						<span class="cmpl-cta-span">{{item.name}}</span>
+
+						{% if item.children is defined and item.children is not empty %}
+							<div class="{{blockClassName}}__nav-menu__sub-nav">
+								<ul class="{{blockClassName}}__nav-menu__sub-nav-container">
+									{% for child in item.children %}
+										<li class="{{ child.class }} {{blockClassName}}__nav-menu__nav-item {{blockClassName}}__nav-menu__sub-nav-item">
+											<div class="{{ item.class }} {{blockClassName}}__nav-menu__sub-nav-item-main">
+												<a class="{{blockClassName}}__nav-menu__link {{blockClassName}}__nav-menu__sub-nav-link {{blockClassName}}__nav-menu-link cmpl-cta-style-{{fields.cta_style|ru}}" href="{{ child.url }}">
+													<span class="cmpl-cta-span">{{ child.name }}</span>
+
+												</a>
+											</div>
+										</li>
+									{% endfor %}
+								</ul>
+							</div>
+						{% endif %}
+					</a>
+				</li>
+			{% endfor %}
+		</ul>
+	{% endif %}
+</nav>