Issue #3348562 by pdureau: Remove hardcoded example string from menu component

css/preview.css

+.pattern-preview__markup--menu_panel .mzp-c-menu-panel {
+  display: block;
+  position: relative;
+}
+
+.pattern-preview__markup--menu_panel .mzp-c-menu-panel.mzp-has-card .mzp-c-menu-panel-card {
+  display: block;
+}

templates/patterns/menu/menu.ui_patterns.yml

 menu:
   label: "Menu"
-  description: "An expandable menu used in the Navigation organism, consisting of Menu Items and an optional Card molecule. https://protocol.mozilla.org/components/detail/menu.html"
+  description: "An expandable menu used in the Navigation organism, consisting of menu panels. https://protocol.mozilla.org/components/detail/menu.html"
   category: Navigation
   fields:
-    title:
-      type: text
-      label: Title
-      preview: "Meet the Family"
     items:
-      type: array
+      type: menu
       label: Menu items.
-      description: Array of menu items components.
+      description: Drupal menu items structure .
       preview:
-        - type: pattern_preview
-          id: menu_item
-        - type: pattern_preview
-          id: menu_item
-        - type: pattern_preview
-          id: menu_item
-    card:
+        - title: Sample link
+          url: "https://www.mozilla.org/"
+        - title: Sample Link with Popup
+          attributes:
+            aria-controls: "menu-panel_2a745173"
+        - title: Sample link again
+          url: "https://www.mozilla.org/"
+    panels:
       type: render
-      label: Card
-      description: A card component.
+      label: Menu panels.
+      description: Menu panels components
       preview:
         type: pattern_preview
-        id: card
+        id: menu_panel
   libraries:
     - menu_init:
         js:

templates/patterns/menu/pattern-menu.html.twig

 <nav{{ attributes.addClass('mzp-c-menu') }}>
   <ul class="mzp-c-menu-category-list">
-    <li class="mzp-c-menu-category">
-      <a class="mzp-c-menu-title" href="https://www.mozilla.org/">Sample Link</a>
-    </li>
-    <li
-     class="mzp-c-menu-category mzp-has-drop-down mzp-js-expandable">
-      <a class="mzp-c-menu-title" href="#" aria-haspopup="true" aria-controls="mzp-c-menu-panel-example">Firefox</a>
-      <div class="mzp-c-menu-panel mzp-has-card"
-       id="mzp-c-menu-panel-example">
-        <div class="mzp-c-menu-panel-container">
-          <button class="mzp-c-menu-button-close"
-           type="button"
-           aria-controls="mzp-c-menu-panel-example">Close
-            Firefox menu</button>
-          <div class="mzp-c-menu-panel-content">
-            <ul>
   {% for item in items %}
-              <li>{{ item }}</li>
-            {% endfor %}
-            </ul>
-          </div>
-          {% if card %}
-          <div class="mzp-c-menu-panel-card">
-          {{ card }}
-          </div>
+    {% set item_attributes = create_attribute(item.attributes|default({})) %}
+    {% set item_attributes = item_attributes.addClass('mzp-c-menu-title') %}
+    {% if item_attributes['aria-controls'] %}
+    <li class="mzp-c-menu-category mzp-has-drop-down mzp-js-expandable">
+      {% set url = item.url|default(item_attributes.href|default("#")) %}
+      <a{{ item_attributes.setAttribute('aria-haspopup', 'true').setAttribute('href', url) }}>{{ item.title }}</a>
+        {{ panels }}
+    </li>
+    {% else %}
+    <li class="mzp-c-menu-category">
+      {% set url = item.url|default(item_attributes.href|default("")) %}
+      {% if url %}
+      <a{{ item_attributes.setAttribute('href', url) }}>{{ item.title }}</a>
+      {% else %}
+      <span{{ item_attributes }}>{{ item.title }}</span>
       {% endif %}
-        </div>
-      </div>
     </li>
+    {% endif %}
+  {% endfor %}
   </ul>
+
 </nav>

templates/patterns/menu_item/menu_item.ui_patterns.yml

@@ -13,8 +13,18 @@ menu_item:
       label: Description
       description: Menu item description
       preview: "This is a short description with only a single sentence and no more."
-    items:
+    icon:
       type: render
+      label: Icon
+      description: A renderabel image
+      preview:
+        type: html_tag
+        tag: img
+        attributes:
+          src: "https://protocol.mozilla.org/protocol/img/icons/image.svg"
+          alt: "Useful alt text where appropriate"
+    items:
+      type: menu
       label: Menu items
       description: "A nested list of menu items. Each menu item contains: - attributes: HTML attributes for the menu item. - below: The menu item child items. - title: The menu link title. -url: The menu link url"
       preview:

templates/patterns/menu_item/pattern-menu_item.html.twig

+{% set attributes = icon ? attributes.addClass("mzp-has-icon") : attributes %}
 <section{{ attributes.addClass('mzp-c-menu-item') }}>
   {% if title or desc %}
-  <div class="mzp-c-menu-item-head">
+  <div class="mzp-c-menu-item-link">
+    {% if icon %}
+      {{ icon }}
+    {% endif %}
     {% if title %}
     <h{{ heading_level|default(4) }} class="mzp-c-menu-item-title">{{ title }}</h{{ heading_level }}>
     {% endif %}

templates/patterns/menu_list/menu_list.ui_patterns.yml

 menu_list:
-  label: "Menu Llst"
+  label: "Menu list"
   description: "A sort title, when clicked, expands a list of links. https://protocol.mozilla.org/components/detail/menu-list.html"
   variants:
     default:

templates/patterns/menu_panel/menu_panel.ui_patterns.yml

+menu_panel:
+  label: "(Menu panel)"
+  description: "An expandable menu used in the Navigation organism, consisting of Menu Items and an optional Card molecule. https://protocol.mozilla.org/components/detail/menu.html"
+  category: Navigation
+  fields:
+    first_col:
+      type: array
+      label: Menu items.
+      description: Array of menu items components.
+      preview:
+        - type: pattern_preview
+          id: menu_item
+        - type: pattern_preview
+          id: menu_item
+    second_col:
+      type: array
+      label: Menu items.
+      description: Array of menu items components.
+      preview:
+        - type: pattern
+          id: menu_item
+          title: "A headline with 30 characters"
+        - type: pattern
+          id: menu_item
+          title: "A headline with 30 characters"
+        - type: pattern
+          id: menu_item
+          title: "A headline with 30 characters"
+    card:
+      type: render
+      label: Card
+      description: A card component.
+      preview:
+        type: pattern_preview
+        id: card
+  settings:
+    panel_id:
+      type: token
+      label: ID
+      description: "Used by menu component to trigger panel opening. Must start with a letter. Random value if missing."
+      preview: "menu-panel_2a745173"

templates/patterns/menu_panel/pattern-menu_panel.html.twig

+{% set attributes = card ? attributes.addClass('mzp-has-card') : attributes %}
+{% set panel_id = panel_id ? panel_id : "menu-panel_" ~ random() %}
+
+<div{{ attributes.addClass('mzp-c-menu-panel').setAttribute('id', panel_id) }}>
+  <div class="mzp-c-menu-panel-container">
+    <button class="mzp-c-menu-button-close" type="button" aria-controls="{{ panel_id }}">
+      {{ "Close menu"|t }}
+    </button>
+    <div class="mzp-c-menu-panel-content">
+      {% if first_col %}
+      <ul>
+      {% for item in first_col %} 
+        <li>{{ item }}</li>
+      {% endfor %}
+      </ul>
+      {% endif %}
+      {% if first_col %}
+      <ul>
+      {% for item in second_col %} 
+        <li>{{ item }}</li>
+      {% endfor %}
+      </ul>
+      {% endif %}
+    </div>
+    {% if card %}
+    <div class="mzp-c-menu-panel-card">
+      {{ card }}
+    </div>
+    {% endif %}
+  </div>
+</div>

ui_suite_protocol.info.yml

@@ -11,6 +11,7 @@ dependencies:
   - ui_styles:ui_styles
 libraries:
   - ui_suite_protocol/base
+  - ui_suite_protocol/preview
 regions:
   header_logo: "Header logo"
   header_menu: "Header menu"

ui_suite_protocol.libraries.yml

@@ -18,6 +18,13 @@ base:
       node_modules/@mozilla-protocol/core/protocol/css/protocol-components.min.css:
         { minified: true }
 
+preview:
+  css:
+    theme:
+      css/preview.css: {}
+  dependencies:
+    - ui_suite_protocol/base
+
 lang_switcher:
   js:
     node_modules/@mozilla-protocol/core/protocol/js/protocol-lang-switcher.min.js:

ui_suite_protocol.theme

@@ -79,6 +79,16 @@ function ui_suite_protocol_preprocess_pattern_split(array &$variables): void {
   }
 }
 
+/**
+ * Implements hook_preprocess_HOOK() for 'pattern_menu_item'.
+ */
+function ui_suite_protocol_preprocess_pattern_menu_item(array &$variables): void {
+  if (array_key_exists('icon', $variables) && is_array($variables['icon'])) {
+    $variables['icon'] = _ui_suite_material_add_class($variables['icon'], 'mzp-c-menu-item-icon');
+
+  }
+}
+
 /**
  * Implements hook_form_alter().
  */