@ecl/mega-menu 5.0.0-alpha.9 → 5.0.0-aplha.13

package/README.md

@@ -15,12 +15,20 @@ npm install --save @ecl/mega-menu
 - **"second_level_aria_label"** (string): (default: ''): Second level list aria label
 - **"third_level_aria_label"** (string): (default: ''): Third level list aria label
 - **"back_label"** (string): (default: ''): Back button label
-- **"icon_path"** (string) (default: ''): Path to the icon sprite
+- **featured_priority"** (string) (default: secondary) Can be primary otherwise: determines which featured panel will be visible
 - **"items"**: (array) (default: []): The menu items - format: [
   {
   "label": (string) (default: '')
   "path": (string) (default: '')
   "external": (boolean) (optional)
+  "promotional" (boolean) (default: false) Promotional menu item, styles can be custommized defining:
+  --ecl-mega-menu-item-promotional-bg
+  --ecl-mega-menu-item-promotional-hover-bg
+  --ecl-mega-menu-item-promotional-focus-bg
+  --ecl-mega-menu-item-promotional-outline-color
+  --ecl-mega-menu-item-promotional-text-color
+  --ecl-mega-menu-item-promotional-hover-text-color
+  --ecl-mega-menu-item-promotional-focus-text-color
   "sr_external" (string) (default: '') Additional label for the external icon
   "container": (string) Empty container to be filled in with content
   "info" (object) (default: {}) Info column
@@ -30,7 +38,7 @@ npm install --save @ecl/mega-menu
   "featured" (object) (optional) {
   "title": (string)
   "content": (string)
-  "items": (associative array) Array of items with image and link
+  "items": (associative array) Array of items with image, link and description
   },
   "children": (associative array) (optional): [
   {
@@ -62,7 +70,6 @@ npm install --save @ecl/mega-menu
     },
     icon:
       {
-        path: '/icons.svg',
         name: 'hamburger',
         size: 'm',
       },
@@ -71,13 +78,11 @@ npm install --save @ecl/mega-menu
   close: { 
     label: 'Close', 
     icon: { 
-      path: '/icons.svg', 
       name: 'close', 
       size: 'm', 
     }, 
   }, 
   back_label: 'Back',
-  icon_path: '/icons.svg',
   items: [
     {
       label: "Menu item",

package/mega-menu-featured-item.html.twig

@@ -4,6 +4,7 @@
   Parameters:
   - "label" (string) Label of the textual link
   - "path" (string) Path or Url for the href of the link
+  - "description" (string) Description of the link or the image
   - "icon_path": Path to the icons sprite
   - "picture" (associative array) ECL picture
     - "img" (associative array) (default: {}):
@@ -28,6 +29,7 @@
 {% set _item_css_class = 'ecl-mega-menu__featured-list__item' %}
 {% set _css_class = 'ecl-mega-menu__featured-link' %}
 {% set _label = label|default('') %}
+{% set _description = description|default('') %}
 {% set _path = path|default('') %}
 {% set _picture = picture|default({})  %}
 {% set _icon_path = icon_path|default('') %}
@@ -97,6 +99,11 @@
       extra_classes: _css_class,
     } only %}
   {% endif %}
+  {% if _description is not empty %}
+    <div class="ecl-mega-menu__featured-list__item-description">
+      {{- _description -}}
+    </div>
+  {% endif %}
 </li>
 
 {% endapply %}

package/mega-menu-item.html.twig

@@ -3,10 +3,17 @@
 {#
   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
+    - "promotional" (boolean) (default: false) Promotional menu item, styles can be custommized defining:
+        --ecl-mega-menu-item-promotional-bg
+        --ecl-mega-menu-item-promotional-hover-bg
+        --ecl-mega-menu-item-promotional-focus-bg
+        --ecl-mega-menu-item-promotional-outline-color
+        --ecl-mega-menu-item-promotional-text-color
+        --ecl-mega-menu-item-promotional-hover-text-color
+        --ecl-mega-menu-item-promotional-focus-text-color
     - "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
@@ -23,6 +30,7 @@
         - "picture": (object) (default: {}) Object of type Picture
         - "path" (string) Path or Url for the href
         - "label" (string) Label of the item
+        - "description" (string) Description for the item
         - "external" (boolean) Whether the link is external
         - "icon_path" (string) Path to the icons sprite
         - "sr_external" (string) (default: '') Additional label for the external icon
@@ -52,9 +60,9 @@
 {% 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 _promotional = _item.promotional|default(false) %}
 {% set _see_all = see_all|default(false) %}
 {% set _sublist_class = 'ecl-mega-menu__sublist' %}
 {% set _mega_class = 'ecl-mega-menu__mega' %}
@@ -68,16 +76,27 @@
 {% 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' %}
+  {% set _menu_list_item_attributes = _menu_list_item_attributes ~ ' data-ecl-has-container aria-haspopup="true"' %}
 {% 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_attributes = _menu_list_item_attributes ~ ' data-ecl-has-children aria-haspopup="true"' %}
   {% set _menu_list_item_class = _menu_list_item_class ~ ' ecl-mega-menu__item--has-children' %}
 {% endif %}
 
+{% if _item.level|default(0) < 2 and _featured is not empty %}
+  {% set _mega_class = _mega_class ~ ' ecl-mega-menu__mega--has-featured' %}
+{% endif %}
+
 {% if _item.level == 2 %}
   {% set _mega_class = _mega_class ~ ' ecl-mega-menu__mega--level-2' %}
+  {% if _item.children is empty %}
+    {% set _mega_class = _mega_class ~ ' ecl-mega-menu-featured-only' %}
+  {% endif %}
+{% endif %}
+
+{% if _promotional %}
+  {% set _menu_list_item_class = _menu_list_item_class ~ ' ecl-mega-menu__item--promotional' %}
 {% endif %}
 
 {% if (_item.children is defined and _item.children is not empty and _item.children is iterable) or _item.container is not empty %}
@@ -85,13 +104,11 @@
   {% 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 %}
@@ -109,7 +126,6 @@
     {% 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,
@@ -121,7 +137,6 @@
         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',
@@ -146,7 +161,7 @@
     </div>
   </div>
 {# Children #}
-{%- elseif _item.children is defined and _item.children is not empty and _item.children is iterable -%}
+{%- elseif (_item.children is defined and _item.children is not empty and _item.children is iterable) or _featured is not empty -%}
   {% set _sublist_aria_label = '' %}
 {% if _item.level|default(0) < 2 %}
   {% set _sublist_aria_label = second_level_aria_label|default('') %}
@@ -178,34 +193,14 @@
       {%- 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: _info.link.extra_attributes|default([])|merge([{
-            name: 'aria-describedby', 
-            value: _info_title_id,
-          }]),
-        }) only %}
-      {%- endif -%}
       </div>
-
     </div>
   {% endif %}
     <div
       class="{{ _mega_class }}"
       data-ecl-mega-menu-mega
     >
+    {% if _item.children is defined and _item.children is not empty and _item.children is iterable %}
       <ul
         class="{{ _sublist_class }}"
         {%- if _sublist_aria_label -%}
@@ -224,12 +219,12 @@
         {% set _sublink_attrs = child.extra_attributes|default([])|merge([
           { name: _menu_sublink_attribute },
         ]) %}
-        {% if child.children is defined and child.children is not empty %}
+        {% if (child.children is defined and child.children is not empty) or child.featured 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.children is defined and child.children is not empty and _item.level|default(0) < 2) or child.featured is not empty %}
           {%- 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() %}
@@ -243,20 +238,18 @@
           {% set _icon = {
             name: 'corner-arrow',
             transform: 'rotate-90',
-            path: _icon_path,
             size: '2xs',
           } %}
         {% endif %}
         <li
           class="{{ _subitem_class }}"
-          {{ _subitem_attrs|raw }}
+          {{ ' ' ~ _subitem_attrs|raw }}
         >
-        {%- if child.children is defined and child.children is not empty -%}
+        {%- if (child.children is defined and child.children is not empty) or child.featured 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,
@@ -266,7 +259,6 @@
               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, 
@@ -284,7 +276,6 @@
               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,
@@ -294,7 +285,7 @@
         </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__spacer" data-ecl-mega-menu-subitem>&nbsp;</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: {
@@ -303,7 +294,6 @@
               path: _item.path,
             },
             icon: {
-              path: _icon_path,
               name: 'arrow-left',
               size: 'xs',
               transform: 'rotate-180',
@@ -315,7 +305,30 @@
           } only %}
         </li>
       {%- endif -%}
+      {%- if _info.link is not empty -%}
+        <li class="ecl-mega-menu__spacer" data-ecl-mega-menu-subitem>&nbsp;</li>
+        <li class="ecl-mega-menu__subitem ecl-mega-menu__see-all" data-ecl-mega-menu-subitem>
+        {% 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',
+            size: 'xs',
+          },
+          extra_classes: _info.link.extra_classes|default('') ~ ' ecl-mega-menu__info-link',
+          extra_attributes: _info.link.extra_attributes|default([])|merge([{
+            name: 'aria-describedby', 
+            value: _info_title_id,
+          }]),
+        }) only %}
+        </li>
+      {%- endif -%}
       </ul>
+    {% endif %}
 
     {# Featured #}
     {% if _featured is not empty %}
@@ -324,34 +337,35 @@
         data-ecl-mega-menu-featured
       >
         <div class="ecl-mega-menu__featured-scrollable">
-      {% 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.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 -%}
+          {% set sublink_id = sublink_id ? sublink_id : _id %}
           <ul
             class="ecl-mega-menu__featured-list"
             aria-labelledby="{{ 'ecl-mega-menu-featured-title-' ~ sublink_id ~ ' ' ~ sublink_id }}"
           >
             {% for item in _featured.items %}
-              {% include '@ecl/mega-menu/mega-menu-featured-item.html.twig' with item|merge({ icon_path: _icon_path }) only %}
+              {% include '@ecl/mega-menu/mega-menu-featured-item.html.twig' with item only %}
             {% endfor %}
           </ul>
         {%- endif -%}
         </div>
       </div>
+    {% endif %}
   {% if _item.level|default(0) < 2 %}
     </div>
   </div>
   {% endif %}
-  {% endif %}
 {% endif %}
 </li>
 

package/mega-menu.html.twig

@@ -10,7 +10,7 @@
   - "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
   - "see_all_label": (string) (default: ''): Label for the "view all" link
-  - "icon_path": (string) (default: ''): Path to the icon sprite
+  - "featured_priority": (string) (default: secondary) Can be primary otherwise: determines which featured panel will be visible in desktop 
   - "items": (array) (default: []): The menu items - format: [
     {
       "label": (string) (default: '')
@@ -28,7 +28,7 @@
       "featured" (oject) (optional) {
         - "title": (string) Title of the featured panel
         - "content": (string) Top content of the featured panel
-        - "items": (associative array) (optional) Array of items with image and link
+        - "items": (associative array) (optional) Array of items with image, link and description
       }
       "children": (associative array) (optional): [
         {
@@ -36,7 +36,22 @@
           "path": (string) (default: '')
           "external": (boolean),
           "sr_external" (string) (default: '') Additional label for the external icon
+          "featured" (oject) (optional) {
+          - "title": (string) Title of the featured panel
+          - "content": (string) Top content of the featured panel
+          - "items": (associative array) (optional) Array of items with image, link and description
           "see_all" (boolean) controls visibility of "View All" button
+          "children": (associative array) (optional): [
+            {
+              "label": (string) (default: '')
+              "path": (string) (default: '')
+              "external": (boolean),
+              "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'
+            }
+          ]
           "see_all_label" (string)
           "see_all_attributes" (optional) (array) (default: [])
             - "name" (string) Attribute name, eg. 'data-test'
@@ -64,13 +79,17 @@
 {% set _toggle = toggle|default({}) %}
 {% set _close = close|default({}) %}
 {% set _items = items|default([{}]) %}
+{% set _featured_priority = featured_priority|default('secondary') %}
 {% set _see_all_label = see_all_label|default('') %}
 {% set _css_class = 'ecl-mega-menu' %}
 {% set _extra_attributes = '' %}
-{% set _icon_path = icon_path|default('') %}
 
 {# Internal logic - Process properties #}
 
+{% if _featured_priority == 'primary' %}
+  {% set _css_class = _css_class ~ ' ecl-mega-menu--featured--primary' %}
+{% endif %}
+
 {% if extra_classes is defined and extra_classes is not empty %}
   {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
 {% endif %}
@@ -102,7 +121,7 @@
   {%- endif -%}
   {{- _extra_attributes|raw -}}
 >
-  <div class="ecl-mega-menu__overlay"></div>
+  <div class="ecl-mega-menu__overlay">&nbsp;</div>
   <div class="ecl-container ecl-mega-menu__container">
     {% set _toggle_icon = {} %}
     {% if _toggle.icon is defined %}
@@ -115,7 +134,6 @@
     {% 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,
@@ -134,7 +152,6 @@
             variant: 'tertiary',
             label: _back_label,
             icon: {
-              path: _icon_path,
               name: 'corner-arrow',
               size: 'xs',
               transform: 'rotate-270',
@@ -155,7 +172,6 @@
             {% 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,