@ecl/mega-menu 5.0.0-alpha.1

package/mega-menu-item.html.twig

@@ -0,0 +1,371 @@
+{% apply spaceless %}
+
+{#
+  Parameters:
+  - "id" (string) Unique id for this item. Needed for accessibility. Generated automatically
+  - "icon_path" (string) Path to the icon sprite
+  - "item" (object)
+    - "label" (string) Label of the menu link
+    - "external" (boolean) External link
+    - "sr_external" (string) (default: '') Additional label for the external icon
+    - "path" (string) Href of the menu link
+    - "extra_attributes" (optional) (array) (default: []) Extra attributes for link
+      - "name" (string) Attribute name, eg. 'data-test'
+      - "value" (optional) (string) Attribute value, eg: 'data-test-1'
+    - "info" (object) (default: {}) Info column
+      - "title" (string) Title of the info panel
+      - "content" (string) Content of the info panel
+      - "link" (object) Structure for the "discover more" link, following ECL Link
+    - "featured": (object) (default({})) Featured column
+      - "title" (string) Title of the featured panel
+      - "content" (string) Content of the featured panel
+      - "items" (associative array) Array of items
+        - "path" (string) Path or Url for the href
+        - "label" (string) Label of the item
+        - "external" (boolean) Whether the link is external
+        - "sr_external" (string) (default: '') Additional label for the external icon
+        - "extra_attributes" (array)
+          - "name" (string) Attribute name, eg. 'data-test'
+          - "value" (optional) (string) Attribute value, eg: 'data-test-1'
+    - "container": (string) White panel to be filled at will
+    - "see_all": (boolean) (default: false) Whether to show the "view all" link
+    - "see_all_label": (string) (default: ''): Label for the "view all" link
+    - "see_all_attributes" (optional) (array) Custom attributes for the "view all" link
+      - "name" (string) Attribute name, eg. 'data-test'
+      - "value" (optional) (string) Attribute value, eg: 'data-test-1'
+    - "children" (array of object) Array of sub-items
+      - "external": (boolean) External link
+      - "sr_external" (string) (default: '') Additional label for the external icon
+      - "path" (string) Href of the sub-item link
+      - "label" (string) Label of the sub-item link
+      - "extra_attributes" (optional) (array) (default: []) Extra attributes for link
+        - "name" (string) Attribute name, eg. 'data-test'
+        - "value" (optional) (string) Attribute value, eg: 'data-test-1'
+#}
+
+{% set _id = id|default('') %}
+{% set _item = item|default({}) %}
+{% set _menu_link_class = 'ecl-mega-menu__link' %}
+{% set _menu_link_attribute = 'data-ecl-mega-menu-link' %}
+{% set _menu_sublink_attribute = 'data-ecl-mega-menu-sublink' %}
+{% set _menu_list_item_attributes = 'data-ecl-mega-menu-item' %}
+{% set _menu_list_item_class = 'ecl-mega-menu__item' %}
+{% set _icon_path = icon_path|default('') %}
+{% set _featured = _item.featured|default({}) %}
+{% set _info = _item.info|default({}) %}
+{% set _see_all = see_all|default(false) %}
+{% set _sublist_class = 'ecl-mega-menu__sublist' %}
+{% set _mega_class = 'ecl-mega-menu__mega' %}
+{% set _see_all_label = see_all_label|default('') %}
+{% set _see_all_attributes = see_all_attributes|default([]) %}
+{% set _can_be_external = true %}
+{% set _icon = {} %}
+
+{# Internal logic - Process properties #}
+
+{% if _item.container is defined and _item.container is not empty %}
+  {% set _can_be_external = false %}
+  {% set _menu_list_item_class = _menu_list_item_class ~ ' ecl-mega-menu__item--has-container' %}
+  {% set _menu_list_item_attributes = _menu_list_item_attributes ~ ' data-ecl-has-container aria-haspopup' %}
+{% endif %}
+
+{% if _item.children is defined and _item.children is not empty and _item.children is iterable %}
+  {% set _menu_list_item_attributes = _menu_list_item_attributes ~ ' data-ecl-has-children aria-haspopup' %}
+  {% set _menu_list_item_class = _menu_list_item_class ~ ' ecl-mega-menu__item--has-children' %}
+{% endif %}
+
+{% if _item.level == 2 %}
+  {% set _mega_class = _mega_class ~ ' ecl-mega-menu__mega--level-2' %}
+{% endif %}
+
+{% if (_item.children is defined and _item.children is not empty and _item.children is iterable) or _item.container is not empty %}
+  {% set _can_be_external = false %}
+  {% set _icon = [{
+    name: 'corner-arrow',
+    transform: 'rotate-90',
+    path: _icon_path,
+    size: '2xs',
+  },
+  {
+    name: 'arrow-left',
+    transform: 'flip-horizontal',
+    path: _icon_path,
+    size: 's',
+  }] %}
+{% endif %}
+
+{%- if _item.label is not empty -%}
+<li class="{{ _menu_list_item_class }}" {{ _menu_list_item_attributes|raw }} id="{{ _id }}">
+  {% set _menu_link_attributes = _item.extra_attributes|default([])|merge([
+    { name: _menu_link_attribute },
+    { name: 'id', value: _id ~ "-link" },
+  ]) %}
+  {% if (_item.children is defined and _item.children is not empty and _item.children is iterable) or _item.container is not empty %}
+    {% set _menu_link_attributes = _menu_link_attributes|merge([
+      { name: 'aria-expanded', value: 'false' },
+    ]) %}
+    {% include '@ecl/button/button.html.twig' with {
+      type: 'button',
+      label: _item.label,
+      icon_path: _icon_path,
+      icon_position: 'after',
+      icon: _icon,
+      extra_classes: _menu_link_class,
+      extra_attributes: _menu_link_attributes,
+    } only %}
+  {% else %}
+    {% include '@ecl/link/link.html.twig' with {
+      link: {
+        type: 'standalone',
+        label: _item.label,
+        path: _item.path,
+        icon_path: _icon_path,
+        external: _can_be_external ? _item.external|default(false),
+        sr_external: _item.sr_external|default(''),
+        icon_position: 'after',
+      },
+      icon: _icon,
+      extra_classes: _menu_link_class,
+      extra_attributes: _menu_link_attributes,
+    } only %}
+  {% endif %}
+{%- endif -%}
+
+{# Container #}
+{%- if _item.container is defined and _item.container is not empty -%}
+  <div
+    class="{{ _mega_class }} ecl-mega-menu__mega-container"
+    data-ecl-mega-menu-mega
+  >
+    <div class="ecl-container">
+      <div class="ecl-mega-menu__mega-container-scrollable">
+        {{ _item.container }}
+      </div>
+    </div>
+  </div>
+{# Children #}
+{%- elseif _item.children is defined and _item.children is not empty and _item.children is iterable -%}
+  {% set _sublist_aria_label = '' %}
+{% if _item.level|default(0) < 2 %}
+  {% set _sublist_aria_label = second_level_aria_label|default('') %}
+  <div class="ecl-mega-menu__wrapper">
+    <div class="ecl-container">
+{% else %}
+  {% set _sublist_aria_label = third_level_aria_label|default('') %}
+{% endif %}
+  {# Info #}
+  {% if _info is not empty %}
+    {% set _info_classes = 'ecl-mega-menu__info' %}
+    {% set _info_title_id =  _id ~ '-info-title' %}
+    {% if _info.link is not empty %}
+      {% set _info_classes = _info_classes ~ ' ecl-mega-menu__info--has-link' %}
+    {% endif %}
+    <div
+      class="{{ _info_classes }}"
+      data-ecl-mega-menu-mega
+    >
+    {% if _info.title is not empty %}
+      <span
+        class="ecl-mega-menu__info-title"
+        id="{{ _info_title_id }}"
+        >
+          {{-  _info.title -}}
+        </span>
+    {% endif %}
+      <div class="ecl-mega-menu__info-scrollable">
+      {%- if _info.content is not empty -%}
+        <div class="ecl-mega-menu__info-content">{{ _info.content }}</div>
+      {%- endif -%}
+      {%- if _info.link is not empty -%}
+        {% set _path = (_info.link.link.path is not empty) ? _info.link.link.path : _item.path %}
+        {% include '@ecl/link/link.html.twig' with _info.link|merge({
+          link: _info.link.link|merge({
+            type: 'standalone',
+            path: _path,
+          }),
+          icon: {
+            name: 'arrow-left',
+            transform: 'flip-horizontal',
+            path: _icon_path,
+            size: 'xs',
+          },
+          extra_classes: _info.link.extra_classes|default('') ~ ' ecl-mega-menu__info-link',
+          extra_attributes: [{
+            name: 'aria-describedby', 
+            value: _info_title_id,
+          }],
+        }) only %}
+      {%- endif -%}
+      </div>
+
+    </div>
+  {% endif %}
+    <div
+      class="{{ _mega_class }}"
+      data-ecl-mega-menu-mega
+    >
+      <ul
+        class="{{ _sublist_class }}"
+        {%- if _sublist_aria_label -%}
+          aria-label="{{ _sublist_aria_label }}"
+        {%- endif -%}
+      >
+      {% for child in _item.children %}
+        {% set _can_be_external = true %}
+        {% set _icon = {} %}
+        {% set _subitem_attrs = 'data-ecl-mega-menu-subitem' %}
+        {% set _subitem_class = 'ecl-mega-menu__subitem' %}
+        {% set _sublink_class = 'ecl-mega-menu__sublink' %}
+        {% if loop.last %}
+          {% set _sublink_class = _sublink_class ~ ' ecl-mega-menu__sublink--last' %}
+        {% endif %}
+        {% set _sublink_attrs = child.extra_attributes|default([])|merge([
+          { name: _menu_sublink_attribute },
+        ]) %}
+        {% if child.children is defined and child.children is not empty %}
+          {% set _sublink_attrs = _sublink_attrs|merge([
+            { name: 'aria-expanded', value: 'false' },
+          ]) %}
+        {% endif %}
+        {% if child.children is defined and child.children is not empty and _item.level|default(0) < 2 %}
+          {%- if child.see_all and child.see_all_label is not empty -%}
+            {% if child.sublink_id is empty %}
+              {% set _sublink_id = 'ecl-mega-menu-sublink-' ~ random() %}
+            {% else %}
+              {% set _sublink_id = child.sublink_id %}
+            {% endif %}
+            {% set _sublink_attrs = _sublink_attrs|merge([{ name: 'id', value: _sublink_id }]) %}
+          {%- endif -%}
+
+          {% set _can_be_external = false %}
+          {% set _icon = {
+            name: 'corner-arrow',
+            transform: 'rotate-90',
+            path: _icon_path,
+            size: '2xs',
+          } %}
+        {% endif %}
+        <li
+          class="{{ _subitem_class }}"
+          {{- _subitem_attrs|raw -}}
+        >
+        {%- if child.children is defined and child.children is not empty -%}
+          {# Children, 2nd level #}
+            {% include '@ecl/button/button.html.twig' with {
+              type: 'button',
+              label: child.label,
+              icon_path: _icon_path,
+              icon: _icon,
+              extra_classes: _sublink_class,
+              extra_attributes: _sublink_attrs,
+          } only %}
+          {% include '@ecl/mega-menu/mega-menu-item.html.twig' with {
+              see_all_label: child.see_all_label|default(''),
+              see_all: child.see_all|default(false),
+              third_level_aria_label: third_level_aria_label|default(''), 
+              see_all_attributes: child.see_all_attributes|default([]),
+              icon_path: _icon_path,
+              sublink_id: _sublink_id|default(''),
+              item: {
+                path: child.path, 
+                children: child.children,
+                level: 2,
+                info: child.info|default({}),
+                featured: child.featured|default({}),
+              },           
+          } only %}
+        {%- else -%}
+          {% include '@ecl/link/link.html.twig' with {
+            link: {
+              type: 'standalone',
+              label: child.label,
+              path: child.path,
+              external: _can_be_external ? child.external|default(false),
+              sr_external: child.sr_external|default(''),
+              icon_path: _icon_path,
+            },
+            icon: _icon,
+            extra_classes: _sublink_class,
+            extra_attributes: _sublink_attrs,
+        } only %}
+        {% endif %}
+        </li>
+      {% endfor %}
+      {%- if _see_all and _see_all_label is not empty -%}
+        <li class="ecl-mega-menu__spacer" data-ecl-mega-menu-subitem></li>
+        <li class="ecl-mega-menu__subitem ecl-mega-menu__see-all" data-ecl-mega-menu-subitem>
+          {% include '@ecl/link/link.html.twig' with {
+            link: {
+              type: 'standalone',
+              label: _see_all_label,
+              path: _item.path,
+            },
+            icon: {
+              path: _icon_path,
+              name: 'arrow-left',
+              size: 'xs',
+              transform: 'rotate-180',
+            },
+            extra_attributes: [{
+             name: 'aria-describedby',
+             value: sublink_id,
+             }]|merge(_see_all_attributes|default([])),
+          } only %}
+        </li>
+      {%- endif -%}
+      </ul>
+
+    {# Featured #}
+    {% if _featured is not empty %}
+      <div
+        class="ecl-mega-menu__featured"
+        data-ecl-mega-menu-featured
+      >
+        <div class="ecl-mega-menu__featured-scrollable">
+      {% if _featured.picture is not empty %}
+        {% include '@ecl/picture/picture.html.twig' with {
+          picture: _featured.picture,
+          extra_classes: 'ecl-mega-menu__featured-picture',
+          extra_image_classes: 'ecl-mega-menu__featured-image',
+        } only %}
+      {% endif %}
+      {% if _featured.title is not empty %}
+        <span
+          class="ecl-mega-menu__featured-title"
+          id="{{ 'ecl-mega-menu-featured-title-' ~ sublink_id }}"
+        >
+          {{-  _featured.title -}}
+        </span>
+      {% endif %}
+        {%- if _featured.content is not empty -%}
+          <div class="ecl-mega-menu__featured-content">{{ _featured.content }}</div>
+        {%- endif -%}
+        {%- if _featured.items is not empty and _featured.items is iterable -%}
+          <ul
+            class="ecl-mega-menu__featured-list"
+            aria-labelledby="{{ 'ecl-mega-menu-featured-title-' ~ sublink_id ~ ' ' ~ sublink_id }}"
+          >
+            {% for item in _featured.items %}
+              <li class="ecl-mega-menu__featured-list__item">
+              {% include '@ecl/link/link.html.twig' with {
+                link: item|merge({ type: 'standalone', icon_path: _icon_path }),
+                extra_attributes: [
+                  { name: 'data-ecl-mega-menu-featured-link' },
+                ]|merge(item.extra_attributes|default([])),
+                extra_classes: item.extra_classes|default(''),
+              } only %}
+              </li>
+            {% endfor %}
+          </ul>
+        {%- endif -%}
+        </div>
+      </div>
+  {% if _item.level|default(0) < 2 %}
+    </div>
+  </div>
+  {% endif %}
+  {% endif %}
+{% endif %}
+</li>
+
+{% endapply %}

package/mega-menu-print.scss

@@ -0,0 +1,8 @@
+/*
+ * Mega Menu print
+ * @define megaMenu
+ */
+
+.ecl-mega-menu {
+  display: none;
+}

package/mega-menu.html.twig

@@ -0,0 +1,170 @@
+{% apply spaceless %}
+
+{#
+  Parameters:
+  - "id": (string) (default: random): Unique id for the menu
+  - "toggle": (associative array) (default: {}): Toggle (hamburger) button, using ECL Button structure
+  - "close": (associative array) (default: {}): Close button, using ECL Button structure
+  - "back_label": (string): (default: ''): Back button label
+  - "aria_label" (string) (default: '') Aria label for the main nav
+  - "second_level_aria_label" (string) (default: '') Aria label for the sub-lists, second level
+  - "third_level_aria_label" (string) (default: '') Aria label for the sub-lists, third level
+  - "icon_path": (string) (default: ''): Path to the icon sprite
+  - "items": (array) (default: []): The menu items - format: [
+    {
+      "label": (string) (default: '')
+      "path": (string) (default: '')
+      "external": (boolean) (optional),
+      "sr_external" (string) (default: '') Additional label for the external icon
+      "extra_attributes" (optional) (array) (default: []) Extra attributes for link,
+        - "name" (string) Attribute name, eg. 'data-test'
+        - "value" (optional) (string) Attribute value, eg: 'data-test-1'
+      "container": (string) Empty container to be filled in with content
+      - "info" (object) (default: {}) Info column
+        - "title" (string) Title of the info panel
+        - "content" (string) Content of the info panel
+        - "link" (object) Structure for the "discover more" link, following ECL Link
+      "featured" (oject) (optional) {
+        - "title": (string) Title of the featured panel
+        - "content": (string) Top content of the featured panel
+        - "items": (associative array) (optional) Object of type ECL link
+      }
+      "children": (associative array) (optional): [
+        {
+          "label": (string) (default: '')
+          "path": (string) (default: '')
+          "external": (boolean),
+          "sr_external" (string) (default: '') Additional label for the external icon
+          "see_all" (boolean)
+          "see_all_label" (string)
+          "see_all_attributes" (optional) (array) (default: [])
+            - "name" (string) Attribute name, eg. 'data-test'
+            - "value" (optional) (string) Attribute value, eg: 'data-test-1'
+          "extra_attributes" (optional) (array) (default: []) Extra attributes for link,
+            - "name" (string) Attribute name, eg. 'data-test'
+            - "value" (optional) (string) Attribute value, eg: 'data-test-1'
+        }
+      ]
+    }
+  ],
+  - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the nav element
+  - "extra_attributes" (optional) (array) (default: []) Extra attributes for the nav element
+    - "name" (string) Attribute name, eg. 'data-test'
+    - "value" (optional) (string) Attribute value, eg: 'data-test-1'
+#}
+
+{# Internal properties #}
+
+{% set _id = id|default('ecl-mega-menu-' ~ random()) %}
+{% set _back_label = back_label|default('') %}
+{% set _aria_label = aria_label|default('') %}
+{% set _second_level_aria_label = second_level_aria_label|default('') %}
+{% set _third_level_aria_label = third_level_aria_label|default('') %}
+{% set _toggle = toggle|default({}) %}
+{% set _close = close|default({}) %}
+{% set _items = items|default([{}]) %}
+{% set _css_class = 'ecl-mega-menu' %}
+{% set _extra_attributes = '' %}
+{% set _icon_path = icon_path|default('') %}
+
+{# Internal logic - Process properties #}
+
+{% if extra_classes is defined and extra_classes is not empty %}
+  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
+{% endif %}
+
+{% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %}
+  {% for attr in extra_attributes %}
+    {% if attr.value is defined %}
+      {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') ~ '="' ~ attr.value|e('html_attr') ~ '"' %}
+    {% else %}
+      {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+
+<nav
+  class="{{ _css_class }}"
+  data-ecl-mega-menu
+  data-ecl-auto-init="MegaMenu"
+  {%- if _toggle is not empty and  _toggle.label is not empty -%}
+    data-ecl-mega-menu-label-open="{{ _toggle.label }}"
+  {%- endif -%}
+  {%- if _close is not empty and _close.label is defined and _close.label is not empty -%}
+    data-ecl-mega-menu-label-close="{{ _close.label }}"
+  {%- endif -%}
+  aria-expanded="false"
+  role="navigation"
+  id={{ _id }}
+  {%- if _aria_label is not empty %}
+    aria-label="{{ _aria_label }}"
+  {%- endif -%}
+  {{- _extra_attributes|raw -}}
+>
+  <div class="ecl-mega-menu__overlay"></div>
+  <div class="ecl-container ecl-mega-menu__container">
+    {% set _toggle_icon = {} %}
+    {% if _toggle.icon is defined %}
+      {% if _close is not empty and _close.icon is not empty %}
+        {% set _toggle_icon = [ _toggle.icon, _close.icon ] %}
+      {% else %}
+        {% set _toggle_icon = _toggle.icon %}
+      {% endif %}
+    {% endif %}
+    {% include '@ecl/button/button.html.twig' with _toggle|merge({
+      type: 'button',
+      variant: 'tertiary',
+      icon_path: _icon_path,
+      icon_position: 'before',
+      icon: _toggle_icon,
+      hide_label: true,
+      extra_classes: 'ecl-mega-menu__open',
+      extra_attributes: [
+        { name: 'data-ecl-mega-menu-open' },
+        { name: 'aria-expanded', value: 'false' }
+      ],
+    }) only %}
+
+    <section class="ecl-mega-menu__inner" data-ecl-mega-menu-inner>
+      <header class="ecl-mega-menu__inner-header">
+        {%- if _back_label is not empty -%}
+          {% include '@ecl/button/button.html.twig' with {
+            type: 'submit',
+            variant: 'tertiary',
+            label: _back_label,
+            icon: {
+              path: _icon_path,
+              name: 'corner-arrow',
+              size: 'xs',
+              transform: 'rotate-270',
+            },
+            icon_position: 'before',
+            extra_classes: 'ecl-mega-menu__back',
+            extra_attributes: [{
+              name: 'data-ecl-mega-menu-back',
+            }],
+          } only %}
+        {%- endif -%}
+      </header>
+      
+      <ul class="ecl-mega-menu__list">
+      {% if _items is not empty and _items is iterable %}
+        {% for key, item in _items %}
+          {% if item is defined and item is not empty %}
+            {% include '@ecl/mega-menu/mega-menu-item.html.twig' with {
+              item: item,
+              id: "ecl-mega-menu-item-" ~ _id ~ '-' ~ key,
+              icon_path: _icon_path,
+              see_all_label: _see_all_label,
+              second_level_aria_label: _second_level_aria_label,
+              third_level_aria_label: _third_level_aria_label,
+            } only %}
+          {% endif %}
+        {% endfor %}
+      {% endif %}
+      </ul>
+    </section>
+  </div>
+</nav>
+
+{% endapply %}