@openeuropa/bcl-mega-menu 0.1.202510071430

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020-2021 Mark Otto
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/mega-menu-items.html.twig

@@ -0,0 +1,35 @@
+{% apply spaceless %}
+
+{% set _label = label ?? null %}
+{% set _items = items ?? [] %}
+{% set _icon_path = icon_path ?? '' %}
+{% set _level = level ?? 1 %}
+{% set _see_all = see_all ?? null %}
+
+<ul class="bcl-mega-menu__items __level-{{ _level }}">
+  {% for _item in _items %}
+    {% set _li_attributes = _item.li_attributes ?? create_attribute() %}
+    {% if _item.items is defined and _item.items is not empty %}
+      {# This is a parent item. #}
+      <li{{ _li_attributes.addClass('__parent') }}>
+        {% include '@oe-bcl/bcl-mega-menu/mega-menu-submenu.html.twig' with _item|merge({
+          icon_path: _icon_path,
+          level: _level + 1,
+        }) only %}
+      </li>
+    {% else %}
+      {# This is a leaf item. #}
+      <li{{ _li_attributes.addClass('__leaf') }}>
+        {% if _item.path is empty %}
+          {# This is a nolink item. #}
+          <span{{ _item.attributes ?? '' }}>{{ _item.label }}</span>
+        {% else %}
+          {# This is a link. #}
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
+        {% endif %}
+      </li>
+    {% endif %}
+  {% endfor %}
+</ul>
+
+{% endapply %}

package/mega-menu-submenu.html.twig

@@ -0,0 +1,65 @@
+{% apply spaceless %}
+
+{% set _items = items ?? [] %}
+{% set _trigger = trigger ?? null %}
+{% set _icon_path = icon_path ?? '' %}
+{% set _level = level ?? 2 %}
+{% set _see_all = see_all ?? null %}
+
+{% set _trigger_id = _trigger.id|default('mm-trigger-' ~ random(10000)) %}
+{% set _panel_id = 'mm-panel-' ~ _trigger_id %}
+
+{% set _trigger_attributes = _trigger.attributes ?? create_attribute() %}
+{% set _trigger = _trigger|merge({
+  attributes: _trigger_attributes
+    .setAttribute('id', _trigger_id)
+    .setAttribute('aria-controls', _panel_id)
+    .setAttribute('aria-expanded', 'false')
+    .setAttribute('aria-haspopup', 'menu'),
+  remove_icon_spacers: true,
+  clean_class: true,
+}) %}
+{% include '@oe-bcl/bcl-button/button.html.twig' with _trigger only %}
+
+{# Add an optional "See all" link as last item. #}
+{% if _see_all is not empty %}
+  {# Wrap the label for an ellipsis. #}
+  {% set _see_all_label %}
+    <span>{{- _see_all.label -}}</span>
+  {% endset %}
+  {% set _see_all_attr = (_see_all.attributes is defined ? _see_all.attributes : create_attribute()) %}
+  {% set _see_all = _see_all|merge({
+    label: _see_all_label,
+    icon: {
+      name: 'arrow-right',
+      path: _icon_path,
+    },
+    li_attributes: create_attribute()
+      .addClass('__see_all'),
+    attributes: _see_all_attr
+      .addClass(['see-all-button'])
+      .setAttribute('aria-label', 'See all items in ‘' ~ _trigger.label ~ '’')
+  }) %}
+  {% set _items = _items|merge([_see_all]) %}
+{% endif %}
+{% set submenu_attributes = create_attribute()
+  .setAttribute('id', _panel_id)
+  .setAttribute('hidden', '')
+  .setAttribute('role', 'group')
+  .setAttribute('aria-labelledby', _trigger_id)
+  .addClass('bcl-mega-menu__submenu', '__level-' ~ _level)
+%}
+<div{{ submenu_attributes }}>
+  {% if _trigger %}
+  <div class="__header">
+      <p class="__label">{{ _trigger.label }}</p>
+  </div>
+  {% endif %}
+  {% include '@oe-bcl/bcl-mega-menu/mega-menu-items.html.twig' with {
+    items: _items,
+    icon_path: _icon_path,
+    level: _level,
+  } only %}
+</div>
+
+{% endapply %}

package/mega-menu.html.twig

@@ -0,0 +1,115 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - id (string) (default: dropdown-random(1000))
+  - link (boolean) (default: false) - sets trigger to link, default is button
+  - trigger (link or button)
+  - content_block (block) (default: '')
+  - content_link (link)
+  - icon_path (string) (default: '')
+  - min_height (string) (default: '300px')
+    ! set min-height of mega-menu
+  - items (object[])
+    format: [
+      {
+        - link or dropdown
+      }
+    ]
+  - back_button_label (string) (default: 'Back')
+  - icon_path (string) (default: '')
+#}
+
+{% set _id = id|default('dropdown-' ~ random(1000)) %}
+{% set _link = link ?? false %}
+{% set _trigger = trigger|default({}) %}
+{% set _content_block = content_block|default('') %}
+{% set _content_link = content_link|default({}) %}
+{% set _icon_path = icon_path|default('') %}
+{% set _items = items|default([]) %}
+{% set _back_button_label = back_button_label|default('Back') %}
+{% set _icon_path = icon_path|default('') %}
+{% set _menu_id = 'mega-menu-' ~ _id %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set _classes = ['bcl-mega-menu'] %}
+
+{% set attributes = attributes.addClass(_classes) %}
+
+{% if _trigger.attributes is empty %}
+  {% set _trigger = _trigger|merge({
+    attributes: create_attribute()
+  }) %}
+{% endif %}
+{% set _trigger = _trigger|merge({
+  attributes: _trigger.attributes.addClass(['dropdown-toggle', 'nav-link'])
+                      .setAttribute('aria-expanded', 'false')
+                      .setAttribute('aria-haspopup', 'menu')
+                      .setAttribute('aria-controls', _menu_id)
+                      .setAttribute('data-bs-toggle', 'dropdown')
+                      .setAttribute('data-bs-auto-close', 'outside')
+                      .setAttribute('id', _id)
+}) %}
+
+<div {{ attributes }}>
+  {% include '@oe-bcl/bcl-button/button.html.twig' with _trigger|merge({
+    variant: 'link',
+    clean_class: true,
+  }) only %}
+  {# Mega menu panel. #}
+  <nav id="{{ _menu_id }}" class="bcl-mega-menu__container dropdown-menu" aria-labelledby="{{ _id }}" aria-label="Main mega menu">
+    <div class="container">
+      {# Mobile back button. #}
+      <div class="container d-lg-none bcl-mega-menu__back-button-block">
+        {% include '@oe-bcl/bcl-button/button.html.twig' with {
+          label: _back_button_label,
+          icon_position: "before",
+          variant: 'link',
+          icon: {
+            path: _icon_path,
+            name: "arrow-left",
+          },
+          attributes: create_attribute().addClass(['back-button']).setAttribute('aria-label', 'Back to main menu')
+        } only %}
+      </div>
+      {# Info/summary and submenu columns. #}
+      <div class="position-relative">
+        <div class="row">
+          {# Content / summary column. #}
+          {% if content_block is defined %}
+            <div class="col-md-12 col-xl-3 position-relative bcl-mega-menu__info">
+              <div class="content-block">
+                {%- block content_block -%}
+                  {{ _content_block }}
+                {%- endblock -%}
+                {% if _content_link.path is not empty %}
+                  {% set _content_link = _content_link|merge({
+                    icon: _content_link.icon|default({})|merge({
+                      path: _icon_path
+                    }),
+                    attributes: (_content_link.attributes is defined
+                      ? _content_link.attributes
+                      : create_attribute()
+                    ).addClass('content-link')
+                  }) %}
+                  <p class="m-0">{% include '@oe-bcl/bcl-link/link.html.twig' with _content_link only %}</p>
+                {% endif %}
+              </div>
+              <div class="shadow-container">
+                <span class="shadow-bg"></span>
+              </div>
+            </div>
+          {% endif %}
+          {# Submenu column. #}
+          <div class="col-md-12 col-lg-4 col-xl-3 bcl-mega-menu__menu">
+            {% include '@oe-bcl/bcl-mega-menu/mega-menu-items.html.twig' %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+</div>
+
+{% endapply %}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@openeuropa/bcl-mega-menu",
+  "author": "European Commission",
+  "license": "EUPL-1.2",
+  "version": "0.1.202510071430",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "OE - BCL mega menu",
+  "dependencies": {
+    "@openeuropa/bcl-button": "^0.1.202510071430",
+    "@openeuropa/bcl-dropdown": "^0.1.202510071430",
+    "@openeuropa/bcl-link": "^0.1.202510071430"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openeuropa/bootstrap-component-library.git"
+  },
+  "bugs": {
+    "url": "https://github.com/openeuropa/bootstrap-component-library.git/issues"
+  },
+  "homepage": "https://github.com/openeuropa/bootstrap-component-library",
+  "keywords": [
+    "openeuropa",
+    "bootstrap-component-library",
+    "design-system",
+    "twig"
+  ],
+  "gitHead": "43791350771d614a6aab0e13003f33a8aa789ea5"
+}