Recursive list component / macro

[lusimeon]

Hi team,

Do you think a TWIG component (or macro) to render list and/or recursive list can be useful? (maybe use cases are rare, or it's overengineering I don't know)

Motivation

The aim is to delegate the complexity in a reusable component. Find below an idea of the component.

The HTML I need:

<ul class="type--big">
  <li class="link--red link--underlined">
    <h2>Red 1</h2>
    <ul class="type--small">
      <li class="link--blue">
        <span>Foo - Blue 1</span>
      </li>
      <li class="link--blue">
        <span>Foo - Blue 2</span>
      </li>
    </ul>
  </li>
  <li class="link--red link--underlined">
    <h2>Red 2</h2>
    <ul class="type--small">
      …
    </ul>
  </li>
</ul>

The TWIG I set:

{% set item_content_lvl_0 %}
  {% verbatim %}
    <h2>{{ item.title }}</h2>
  {% endverbatim %}
{% endset %}

{% set item_content_lvl_1 %}
  {% verbatim %}
    <span>Foo - {{ item.title }}</span>
  {% endverbatim %}
{% endset %}

{# Template way #}
{% include "components/recursive_list.twig" with {
  items: [
    {
      title: 'Red 1'
      children: [
        {title: 'Blue 1'},
        {title: 'Blue 2'},
     ],
    },
    {title: 'Red 2', children: […]},
  ],
  item_contents: [
    item_content_lvl_0, # item 1st level content 
    item_content_lvl_1 # item 2nd level content 
  ],
  parent_classes: [
    ['type--big'], # ul 1st level classes
    ['type--small'], # ul 2nd level classes
  ],
  item_classes: [
    ['link--red', 'link--underlined'], # li 1st level classes
    ['type--small'], # li 2nd level classes
  ],
} only %}

{# Macro way #}
{% from 'list.html' import recursive_list %}

{{ recursive_list(
  [
    {
      title: 'Red 1'
      children: [
        {title: 'Blue 1'},
        {title: 'Blue 2'},
     ],
    },
    {title: 'Red 2', children: […]},
  ],
  [
    item_content_lvl_0, # item 1st level content 
    item_content_lvl_1 # item 2nd level content 
  ],
  [
    ['type--big'], # ul 1st level classes
    ['type--small'], # ul 2nd level classes
  ],
  [
    ['link--red', 'link--underlined'], # li 1st level classes
    ['type--small'], # li 2nd level classes
  ]
) }}

[titouanmathis]

@lusimeon do you have a "real world" use case? This feels overengineered to me for the example you suggested, the Twig template seems to be as complex with the macro as it would with more classical loops.