Issue #3489964 by pdureau, grimreaper: [5.1.0] Replace component() function by include()

components/alert/alert.twig

@@ -12,11 +12,11 @@
   {% endif %}
   {{ message }}
   {% if dismissible %}
-    {{ component('ui_suite_bootstrap:close_button', {}, {
+    {{ include('ui_suite_bootstrap:close_button', {
       attributes: {
         'data-bs-dismiss': 'alert',
       },
       aria_label: 'Close'|t,
-    }) }}
+    }, with_context = false) }}
   {% endif %}
 </div>

components/dropdown/dropdown.twig

@@ -31,30 +31,27 @@
 <{{ dropdown_tag }}{{ attributes.addClass(variant) }}>
 
 {% if button_split %}
-  {{ component('ui_suite_bootstrap:button', {
+  {{ include('ui_suite_bootstrap:button', {
     label: title,
-  }, {
     attributes: {
       id: dropdown_id,
     },
     variant: button_variant,
     url: button_url,
-  }) }}
-  {{ component('ui_suite_bootstrap:button', {
+  }, with_context = false) }}
+  {{ include('ui_suite_bootstrap:button', {
     label: 'Toggle dropdown'|t,
-  }, {
     attributes: button_attributes.addClass('dropdown-toggle-split'),
     variant: button_variant,
     label_visually_hidden: true,
-  }) }}
+  }, with_context = false) }}
 {% else %}
-  {{ component('ui_suite_bootstrap:button', {
+  {{ include('ui_suite_bootstrap:button', {
     label: title,
-  }, {
     attributes: button_attributes.setAttribute('id', dropdown_id),
     variant: button_variant,
     url: button_url,
-  }) }}
+  }, with_context = false) }}
 {% endif %}
 
   {% if content %}

components/modal/modal.preview.story.yml

@@ -26,13 +26,12 @@ props:
 library_wrapper: >
   {% set modal_id = modal_id|default("modal-" ~ random()) %}
   {% set props = {'#props': _story['#props']|merge({'modal_id': modal_id})} %}
-  {{ component('ui_suite_bootstrap:button', {
+  {{ include('ui_suite_bootstrap:button', {
     'label': 'Launch demo modal'|t,
-  }, {
     'variant': 'primary',
     'attributes': {
       'data-bs-target': '#' ~ modal_id,
       'data-bs-toggle':'modal',
     },
-  }) }}
+  }, with_context = false) }}
   {{ _story|merge(props) }}

components/modal/modal.twig

@@ -29,11 +29,11 @@
         {% if title %}
           <h{{ heading_level }} class="modal-title" id="label_{{ modal_id }}">{{ title }}</h{{ heading_level }}>
         {% endif %}
-        {{ component('ui_suite_bootstrap:close_button', {}, {
+        {{ include('ui_suite_bootstrap:close_button', {
           attributes: {
             'data-bs-dismiss': 'modal',
-          }
-        }) }}
+          },
+        }, with_context = false) }}
       </div>
 
     {% if body %}

components/nav/nav.twig

@@ -36,9 +36,8 @@
     {% endif %}
 
     {% if item.below %}
-      {{ component('ui_suite_bootstrap:dropdown', {
+      {{ include('ui_suite_bootstrap:dropdown', {
         'title': item.title,
-      }, {
         'attributes': item_attributes,
         'variant': 'dropdown',
         'auto_close': 'true',
@@ -47,7 +46,7 @@
         'content': item.below,
         'dropdown_id': dropdown_id|default("dropdown-" ~ random())  ~ "-" ~ loop.index0,
         'dropdown_navbar': nav_type in ['ul', 'ol'],
-      }) }}
+      }, with_context = false) }}
     {% else %}
       <{{ link_type }}{{ link_attributes }}>
         {{ item.title }}

components/navbar/navbar.twig

@@ -38,13 +38,12 @@
 
     {% if navigation_collapsible %}
       {% if toggle_action == 'offcanvas' %}
-        {{ component('ui_suite_bootstrap:offcanvas', {
+        {{ include('ui_suite_bootstrap:offcanvas', {
           'title': offcanvas_label|default('Navigation'|t),
           'body': navigation_collapsible,
-        }, {
           'variant': offcanvas_position,
           'offcanvas_id': navbar_id,
-        }) }}
+        }, with_context = false) }}
       {% else %}
         <div class="collapse navbar-collapse" id="{{ navbar_id }}">
           {{ navigation_collapsible }}

components/navbar_nav/navbar_nav.twig

@@ -27,9 +27,8 @@
     {% set item_attributes = create_attribute(item.attributes|default({})) %}
     {% set link_attributes = create_attribute(item.link_attributes|default({})) %}
     {% if item.below %}
-      {{ component('ui_suite_bootstrap:dropdown', {
+      {{ include('ui_suite_bootstrap:dropdown', {
         'title': item.title,
-      }, {
         'attributes': {
           'class': ['nav-item'],
         },
@@ -39,7 +38,7 @@
         'content': item.below,
         'dropdown_id': dropdown_id|default("dropdown-" ~ random())  ~ "-" ~ loop.index,
         'dropdown_navbar': true,
-      }) }}
+      }, with_context = false) }}
     {% elseif item.url %}
       <li{{ item_attributes.addClass('nav-item') }}>
         <a{{ link_attributes.setAttribute('href', item.url).addClass('nav-link') }}>{{ item.title }}</a>

components/offcanvas/offcanvas.preview.story.yml

@@ -8,9 +8,8 @@ props:
 library_wrapper: >
   {% set offcanvas_id = offcanvas_id|default("offcanvas-" ~ random()) %}
   {% set props = {'#props': _story['#props']|merge({'offcanvas_id': offcanvas_id})} %}
-  {{ component('ui_suite_bootstrap:button', {
+  {{ include('ui_suite_bootstrap:button', {
     'label': 'Launch offcanvas'|t,
-  }, {
     'variant': 'primary',
     'attributes': {
       'data-bs-target': '#' ~ offcanvas_id,
@@ -18,5 +17,5 @@ library_wrapper: >
       'aria-controls': offcanvas_id,
       'aria-expanded': 'false',
     },
-  }) }}
+  }, with_context = false) }}
   {{ _story|merge(props) }}

components/offcanvas/offcanvas.twig

@@ -19,12 +19,12 @@
     {% if title %}
       <h{{ heading_level }} class="offcanvas-title" id="label_{{ offcanvas_id }}">{{ title }}</h{{ heading_level }}>
     {% endif %}
-    {{ component('ui_suite_bootstrap:close_button', {}, {
+    {{ include('ui_suite_bootstrap:close_button', {
       attributes: {
         'data-bs-dismiss': 'offcanvas',
         'data-bs-target': '#' ~ offcanvas_id,
-      }
-    }) }}
+      },
+    }, with_context = false) }}
   </div>
 
   {% if body %}

components/table/table.twig

@@ -72,9 +72,9 @@
 
   {% if header %}
     <thead{{ thead_attributes }}>
-      {{ component('ui_suite_bootstrap:table_row', {
+      {{ include('ui_suite_bootstrap:table_row', {
         'cells': header,
-      }) }}
+      }, with_context = false) }}
     </thead>
   {% endif %}
 
@@ -84,15 +84,14 @@
     </tbody>
   {% elseif empty %}
     <tbody{{ tbody_attributes }}>
-      {{ component('ui_suite_bootstrap:table_row', {
-        'cells': component('ui_suite_bootstrap:table_cell', {
+      {{ include('ui_suite_bootstrap:table_row', {
+        'cells': include('ui_suite_bootstrap:table_cell', {
           'content': empty,
-        }, {
           'attributes': {
             'colspan': header_columns,
           },
-        })
-      }) }}
+        }, with_context = false),
+      }, with_context = false) }}
     </tbody>
   {% endif %}
 

components/toast/toast.twig

@@ -29,12 +29,12 @@
       {{ header }}
 
       {% if not hide_close_button %}
-        {{ component('ui_suite_bootstrap:close_button', {}, {
+        {{ include('ui_suite_bootstrap:close_button', {
           attributes: {
             'data-bs-dismiss': 'toast',
           },
           variant: close_button_variant,
-        }) }}
+        }, with_context = false) }}
       {% endif %}
     </div>
   {% endif %}
@@ -46,16 +46,16 @@
   {% endif %}
 
   {% if not hide_close_button and not header %}
-    {{ component('ui_suite_bootstrap:close_button', {}, {
+    {{ include('ui_suite_bootstrap:close_button', {
       attributes: {
         'data-bs-dismiss': 'toast',
         'class': [
           'me-2',
           'm-auto',
-        ]
+        ],
       },
       variant: close_button_variant,
-    }) }}
+    }, with_context = false) }}
   {% endif %}
 
   {% if flex_wrapper %}

templates/comment/comment.html.twig

@@ -91,7 +91,7 @@
     server which comments are new for the user. Rendering the final "new"
     indicator here would break the render cache.
     #}
-    {{ component('ui_suite_bootstrap:badge', {}, {
+    {{ include('ui_suite_bootstrap:badge', {
       'attributes': {
         'class': [
           'hidden',
@@ -99,7 +99,7 @@
         ],
         'data-comment-timestamp': new_indicator_timestamp,
       }
-    }) }}
+    }, with_context = false) }}
 
     {#
       Indicate the semantic relationship between parent and child comments for

templates/commerce/cart/commerce-cart-block.html.twig

 {# Use accordion if the content of the cart is displayed. #}
 {% if content %}
-  {{ component('ui_suite_bootstrap:accordion', {
+  {{ include('ui_suite_bootstrap:accordion', {
     'content': [
-      component('ui_suite_bootstrap:accordion_item', {
+      include('ui_suite_bootstrap:accordion_item', {
         'title': count_text,
         'content': [
           content,
           links,
-        ]
-      })
-    ]
-  }, {
+        ],
+      }, with_context = false),
+    ],
     'attributes': attributes,
     'variant': 'default',
-  }) }}
+  }, with_context = false) }}
 {% else %}
-  <div{{ attributes}}>
-    {{ component('ui_suite_bootstrap:button', {
+  <div{{ attributes }}>
+    {{ include('ui_suite_bootstrap:button', {
       'label': count_text,
-    }, {
       'variant': 'link',
       'url': url,
-    }) }}
+    }, with_context = false) }}
   </div>
 {% endif %}

templates/commerce/cart/commerce-cart-empty-page.html.twig

@@ -7,8 +7,7 @@
  * @ingroup themeable
  */
 #}
-{{ component('ui_suite_bootstrap:alert', {
+{{ include('ui_suite_bootstrap:alert', {
   'message': 'Your shopping cart is empty.'|t,
-}, {
   'variant': 'info',
-}) }}
+}, with_context = false) }}

templates/commerce/checkout/commerce-checkout-form--with-sidebar.html.twig

@@ -18,18 +18,16 @@
       </div>
     </div>
     <div class="col col-12 col-md-4">
-      {{ component('ui_suite_bootstrap:card', {
+      {{ include('ui_suite_bootstrap:card', {
         'content': [
-          component('ui_suite_bootstrap:card_body', {
+          include('ui_suite_bootstrap:card_body', {
             'title': 'Order summary'|t,
             'content': form.sidebar,
-          }, {
             'heading_level': 3,
-          })
-        ]
-      }, {
+          }, with_context = false),
+        ],
         'variant': 'default',
-      }) }}
+      }, with_context = false) }}
     </div>
   </div>
 

templates/commerce/checkout/commerce-checkout-progress.html.twig

@@ -16,9 +16,8 @@
 {% set items = [] %}
 {% for step in steps %}
   {% set items = items|merge([
-    component('ui_suite_bootstrap:list_group_item', {
+    include('ui_suite_bootstrap:list_group_item', {
       'content': step.label,
-    }, {
       'attributes': {
         'class': [
           'checkout-progress--step',
@@ -27,13 +26,12 @@
         ],
       },
       'variant': 'primary',
-    })
+    }, with_context = false),
   ]) %}
 {% endfor %}
 
-{{ component('ui_suite_bootstrap:list_group', {
+{{ include('ui_suite_bootstrap:list_group', {
   'items': items,
-}, {
   'attributes': {
     'class': [
       'checkout-progress',
@@ -41,4 +39,4 @@
     ],
   },
   'variant': 'numbered__horizontal',
-}) }}
+}, with_context = false) }}

templates/menu/menu-local-tasks.html.twig

@@ -15,15 +15,15 @@
 #}
 {% if primary %}
   <h2 class="visually-hidden">{{ 'Primary tabs'|t }}</h2>
-  {{ component('ui_suite_bootstrap:nav', {}, {
+  {{ include('ui_suite_bootstrap:nav', {
     'variant': 'tabs',
     'items': preprocessed_items_primary,
-  }) }}
+  }, with_context = false) }}
 {% endif %}
 {% if secondary %}
   <h2 class="visually-hidden">{{ 'Secondary tabs'|t }}</h2>
-  {{ component('ui_suite_bootstrap:nav', {}, {
+  {{ include('ui_suite_bootstrap:nav', {
     'variant': 'tabs',
     'items': preprocessed_items_secondary,
-  }) }}
+  }, with_context = false) }}
 {% endif %}

templates/menu/menu.html.twig

@@ -19,8 +19,8 @@
  * Define a custom macro that will render all menu trees.
  */
 #}
-{{ component('ui_suite_bootstrap:navbar_nav', {}, {
+{{ include('ui_suite_bootstrap:navbar_nav', {
   'attributes': attributes.addClass(classes ?: ['menu', 'menu--' ~ menu_name|clean_class]),
   'variant': 'default',
   'items': items,
-}) }}
+}, with_context = false) }}

templates/region/region--help.html.twig

@@ -16,11 +16,10 @@
 #}
 
 {% if content %}
-  {{ component('ui_suite_bootstrap:alert', {
-    'message': content
-  }, {
+  {{ include('ui_suite_bootstrap:alert', {
+    'message': content,
     'attributes': attributes,
     'variant': 'info',
     'dismissible': false,
-  }) }}
+  }, with_context = false) }}
 {% endif %}

templates/system/breadcrumb.html.twig

@@ -10,7 +10,7 @@
  */
 #}
 {% if breadcrumb %}
-  {{ component('ui_suite_bootstrap:breadcrumb', {}, {
+  {{ include('ui_suite_bootstrap:breadcrumb', {
     'items': breadcrumb,
-  }) }}
+  }, with_context = false) }}
 {% endif %}