Change the type of compoent content array

Hi Rahaf,

Thanks for using UI Patterns Release Candidate and share your feedbacks.

Can you tell us more? What is the component definition? In which prop do you wnat to send this menu data? How? From a presenter template ? A render element ?

Hi @pdureau,

Sure thing! I have a menu template in my custom theme where I called the nav component using @include. Additionally, I have item slots (the menu items' details).

Here is how I called the component.

{% include 'varbase_components:nav' with {
  utility_classes: [
    'social-media--menu',
    'w-fc',
    'h-px-32',
    'align-items-center',
    'gap-20',
  ],
} %}

When I try to render the items in menu.html.twig, the array renders correctly (see "before" image). However, when I use @include to call the nav.twig component, the array gets converted to an indexed array (see "after" image).

Please let me know If you need another Information.

I guess we are talking about https://git.drupalcode.org/project/varbase_components/-/blob/2.0.x/compo... :)

You are typing the slot, which is not a thing:

slots:
  items:
    type: array
    name: Items
    description: Navigation items.

Better to remove it:

slots:
  items:
    name: Items
    description: Navigation items.

Then, what do you send in this slot? I don't see anything explicit here:
{% include 'varbase_components:nav' with {
utility_classes: [
'social-media--menu',
'w-fc',
'h-px-32',
'align-items-center',
'gap-20',
],
} %}

I am afraid you are sending a menu structure to the slot instead of a renderable.

It is better to use include function, with with_context = false and explicit mapping:
{{ include('varbase_components:nav', {
utility_classes: [...]
items: ...,
}, with_context = false) }}

Hi pdureau,

Many thanks for checking. Yes, I'm sending the items (menu structure) to the items slot in the nav component.

I removed the type array and used the include function with context, but nothing has changed.

Yes, I'm sending the items (menu structure) to the items slot in the nav component.

That's the issue. This is not UI Patterns 2 related, but SDC related. The menu structure is not renderable. It is a rigid typed structure you are manipulating instead of just printing:

      {% for item in items %}
        {% set nav_item_classes = [
          'nav-item',
          item.is_expanded and item.below ? 'dropdown' : '',
          item.in_active_trail ? 'active',
        ] %}

So, you have 2 choices:

• keep items a slot and send an already built menu renderable in it
• make items a prop following the menu structure, something like that:
  

  type: array
  items:
    type: object
    properties:
      title:
        type: string
      url:
        type: string
        format: iri-reference
      below:
        type: array
        items:
          type: object