diff --git a/README.md b/README.md
index f72fc2ca53ab017cef4478ac2826a5f88beafe97..eb0347e5d62ed0725253a2a503f66efdf7aa66c5 100644
--- a/README.md
+++ b/README.md
@@ -17,8 +17,7 @@ See the [docs](./docs) folder for more detailed documentation on:
This theme requires the following modules:
- [Layout Options](https://www.drupal.org/project/layout_options)
-- [UI Patterns Library](https://www.drupal.org/project/ui_patterns)
-- [UI Patterns Settings](https://www.drupal.org/project/ui_patterns_settings)
+- [UI Patterns](https://www.drupal.org/project/ui_patterns)
- [UI Styles](https://www.drupal.org/project/ui_styles)
This theme requires the Bootstrap library to be placed in the `libraries`
diff --git a/components/alert/alert.twig b/components/alert/alert.twig
index 971d1d71bcfde57ba0578b977a6b5705a97b8055..73cbdee27a26632090f5cdc322eb721a06ebd07e 100644
--- a/components/alert/alert.twig
+++ b/components/alert/alert.twig
@@ -12,9 +12,9 @@
{% endif %}
{{ message }}
{% if dismissible %}
- {{ pattern('close_button', {
+ {{ component('ui_suite_bootstrap:close_button', {}, {
attributes: create_attribute({
- 'data-bs-dismiss': 'alert'
+ 'data-bs-dismiss': 'alert',
}),
aria_label: 'Close'|t,
}) }}
diff --git a/components/dropdown/dropdown.twig b/components/dropdown/dropdown.twig
index d9279f5b32bfcb23495936af7362309718920542..a952fb386c8b0784d9ac4319aa3ca1ccfddcef75 100644
--- a/components/dropdown/dropdown.twig
+++ b/components/dropdown/dropdown.twig
@@ -31,24 +31,27 @@
<{{ dropdown_tag }}{{ attributes.addClass(variant) }}>
{% if button_split %}
- {{ pattern('button', {
- variant: button_variant,
+ {{ component('ui_suite_bootstrap:button', {
label: title,
+ }, {
+ attributes: create_attribute().setAttribute('id', dropdown_id),
+ variant: button_variant,
url: button_url,
- attributes: create_attribute().setAttribute('id', dropdown_id)
}) }}
- {{ pattern('button', {
- variant: button_variant,
+ {{ component('ui_suite_bootstrap:button', {
label: 'Toggle dropdown'|t,
+ }, {
+ attributes: button_attributes.addClass('dropdown-toggle-split'),
+ variant: button_variant,
label_visually_hidden: true,
- attributes: button_attributes.addClass('dropdown-toggle-split')
}) }}
{% else %}
- {{ pattern('button', {
- variant: button_variant,
+ {{ component('ui_suite_bootstrap:button', {
label: title,
+ }, {
+ attributes: button_attributes.setAttribute('id', dropdown_id),
+ variant: button_variant,
url: button_url,
- attributes: button_attributes.setAttribute('id', dropdown_id)
}) }}
{% endif %}
diff --git a/components/modal/modal.twig b/components/modal/modal.twig
index 7e1d6c03ec6388e673fabbb5f7a5b8e53167850b..d21c53ba4522b819392b06d0bb83baad1db423f3 100644
--- a/components/modal/modal.twig
+++ b/components/modal/modal.twig
@@ -29,9 +29,9 @@
{% if title %}
<h{{ heading_level }} class="modal-title" id="label_{{ modal_id }}">{{ title }}</h{{ heading_level }}>
{% endif %}
- {{ pattern('close_button', {
+ {{ component('ui_suite_bootstrap:close_button', {}, {
attributes: create_attribute({
- 'data-bs-dismiss': 'modal'
+ 'data-bs-dismiss': 'modal',
})
}) }}
</div>
diff --git a/components/nav/nav.twig b/components/nav/nav.twig
index 006642a815ef472436039b124bfb6d0d02ff3b2b..813197ea1aac33604f8c0c296934ef3887e08abc 100644
--- a/components/nav/nav.twig
+++ b/components/nav/nav.twig
@@ -35,16 +35,17 @@
{% endif %}
{% if item.below %}
- {{ pattern('dropdown', {
- 'variant': 'dropdown',
+ {{ component('ui_suite_bootstrap:dropdown', {
'title': item.title,
+ }, {
+ 'attributes': item_attributes,
+ 'variant': 'dropdown',
+ 'auto_close': 'true',
+ 'button_attributes': link_attributes,
+ 'button_variant': 'default',
'content': item.below,
'dropdown_id': dropdown_id|default("dropdown-" ~ random()) ~ "-" ~ loop.index0,
- 'auto_close': 'true',
'dropdown_navbar': nav_type in ['ul', 'ol'],
- 'button_variant': 'default',
- 'button_attributes': link_attributes,
- 'attributes': item_attributes
}) }}
{% else %}
<{{ link_type }}{{ link_attributes }}>
diff --git a/components/navbar/navbar.twig b/components/navbar/navbar.twig
index 7916599ad4508e8a9e71ae18af6c36c0f7fc4a29..e2d1df4a3b7cf5b9e3c61ce3c9b9220bcd41c814 100644
--- a/components/navbar/navbar.twig
+++ b/components/navbar/navbar.twig
@@ -38,11 +38,12 @@
{% if navigation_collapsible %}
{% if toggle_action == 'offcanvas' %}
- {{ pattern('offcanvas', {
- 'variant': offcanvas_position,
- 'offcanvas_id': navbar_id,
+ {{ component('ui_suite_bootstrap:offcanvas', {
'title': offcanvas_label|default('Navigation'|t),
'body': navigation_collapsible,
+ }, {
+ 'variant': offcanvas_position,
+ 'offcanvas_id': navbar_id,
}) }}
{% else %}
<div class="collapse navbar-collapse" id="{{ navbar_id }}">
diff --git a/components/navbar_nav/navbar_nav.twig b/components/navbar_nav/navbar_nav.twig
index 69bbb55edcbd3b785b38923dd56477582cab44b4..5a541883f9a770052f02b1fb01a97c207c5366a4 100644
--- a/components/navbar_nav/navbar_nav.twig
+++ b/components/navbar_nav/navbar_nav.twig
@@ -27,17 +27,18 @@
{% set item_attributes = create_attribute(item.attributes|default({})) %}
{% set link_attributes = create_attribute(item.link_attributes|default({})) %}
{% if item.below %}
- {{ pattern('dropdown', {
- 'variant': 'dropdown',
+ {{ component('ui_suite_bootstrap:dropdown', {
'title': item.title,
+ }, {
+ 'attributes': create_attribute({
+ 'class': ['nav-item'],
+ }),
+ 'variant': 'dropdown',
+ 'auto_close': 'true',
+ 'button_attributes': link_attributes,
'content': item.below,
'dropdown_id': dropdown_id|default("dropdown-" ~ random()) ~ "-" ~ loop.index,
- 'auto_close': 'true',
'dropdown_navbar': true,
- 'attributes': create_attribute({
- 'class': ['nav-item']
- }),
- 'button_attributes': link_attributes
}) }}
{% elseif item.url %}
<li{{ item_attributes.addClass('nav-item') }}>
diff --git a/components/offcanvas/offcanvas.twig b/components/offcanvas/offcanvas.twig
index 63287aa3eee9fb9c7e688b158734b12a85368efe..3f343487fa5d7226fdc7ec6fee02114f1f4e80fe 100644
--- a/components/offcanvas/offcanvas.twig
+++ b/components/offcanvas/offcanvas.twig
@@ -19,10 +19,10 @@
{% if title %}
<h{{ heading_level }} class="offcanvas-title" id="label_{{ offcanvas_id }}">{{ title }}</h{{ heading_level }}>
{% endif %}
- {{ pattern('close_button', {
+ {{ component('ui_suite_bootstrap:close_button', {}, {
attributes: create_attribute({
'data-bs-dismiss': 'offcanvas',
- 'data-bs-target': '#' ~ offcanvas_id
+ 'data-bs-target': '#' ~ offcanvas_id,
})
}) }}
</div>
diff --git a/components/table/table.twig b/components/table/table.twig
index 0aa54eec04ae337fc3c4f158cd9d6c15c3b11392..65f41df9a5ec12b4a4b55bee94c2b11f308db8ca 100644
--- a/components/table/table.twig
+++ b/components/table/table.twig
@@ -70,8 +70,8 @@
{% if header %}
<thead{{ thead_attributes }}>
- {{ pattern('table_row', {
- 'cells': header
+ {{ component('ui_suite_bootstrap:table_row', {
+ 'cells': header,
}) }}
</thead>
{% endif %}
@@ -82,12 +82,13 @@
</tbody>
{% elseif empty %}
<tbody{{ tbody_attributes }}>
- {{ pattern('table_row', {
- 'cells': pattern('table_cell', {
+ {{ component('ui_suite_bootstrap:table_row', {
+ 'cells': component('ui_suite_bootstrap:table_cell', {
+ 'content': empty,
+ }, {
'attributes': create_attribute({
'colspan': header_columns,
}),
- 'content': empty
})
}) }}
</tbody>
diff --git a/components/toast/toast.twig b/components/toast/toast.twig
index 9ace73a99c5fffb8c1ffd39634c9009fc6c469dc..9aebcd46f170181a90ab447a4bcb240ae7ed2ebb 100644
--- a/components/toast/toast.twig
+++ b/components/toast/toast.twig
@@ -29,11 +29,12 @@
{{ header }}
{% if not hide_close_button %}
- {{ pattern('close_button', {
+ {{ component('ui_suite_bootstrap:close_button', {}, {
attributes: create_attribute({
- 'data-bs-dismiss': 'toast'
- })
- }, close_button_variant) }}
+ 'data-bs-dismiss': 'toast',
+ }),
+ variant: close_button_variant,
+ }) }}
{% endif %}
</div>
{% endif %}
@@ -45,15 +46,15 @@
{% endif %}
{% if not hide_close_button and not header %}
- {{ pattern('close_button', {
- variant: close_button_variant,
+ {{ component('ui_suite_bootstrap:close_button', {}, {
attributes: create_attribute({
'data-bs-dismiss': 'toast',
'class': [
'me-2',
'm-auto'
]
- })
+ }),
+ variant: close_button_variant,
}) }}
{% endif %}
diff --git a/templates/comment/comment.html.twig b/templates/comment/comment.html.twig
index 4966982b7e016fe5fb39729ebb0eb3af3886d6f8..9dac0a31f3a9adc578e322d5d216568287db4147 100644
--- a/templates/comment/comment.html.twig
+++ b/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.
#}
- {{ pattern('badge', {
+ {{ component('ui_suite_bootstrap:badge', {}, {
'attributes': create_attribute({
'class': [
'hidden',
diff --git a/templates/commerce/cart/commerce-cart-block.html.twig b/templates/commerce/cart/commerce-cart-block.html.twig
index 4c57c3fb8d154f6f65ee1385b30566e33af88261..eea55fbbc686f554fb528e4b7d32638ffebcd51f 100644
--- a/templates/commerce/cart/commerce-cart-block.html.twig
+++ b/templates/commerce/cart/commerce-cart-block.html.twig
@@ -1,10 +1,8 @@
{# Use accordion if the content of the cart is displayed. #}
{% if content %}
- {{ pattern('accordion', {
- 'variant': 'default',
- 'attributes': attributes,
+ {{ component('ui_suite_bootstrap:accordion', {
'content': [
- pattern('accordion_item', {
+ component('ui_suite_bootstrap:accordion_item', {
'title': count_text,
'content': [
content,
@@ -12,13 +10,17 @@
]
})
]
+ }, {
+ 'attributes': attributes,
+ 'variant': 'default',
}) }}
{% else %}
<div{{ attributes}}>
- {{ pattern('button', {
+ {{ component('ui_suite_bootstrap:button', {
+ 'label': count_text,
+ }, {
'variant': 'link',
'url': url,
- 'label': count_text
}) }}
</div>
{% endif %}
diff --git a/templates/commerce/cart/commerce-cart-empty-page.html.twig b/templates/commerce/cart/commerce-cart-empty-page.html.twig
index 29bf215e21df1586be3928a622d7c119ac8b99ec..e24bf7ac5b153f1c4368ab0798e711e4c08f3352 100644
--- a/templates/commerce/cart/commerce-cart-empty-page.html.twig
+++ b/templates/commerce/cart/commerce-cart-empty-page.html.twig
@@ -7,7 +7,8 @@
* @ingroup themeable
*/
#}
-{{ pattern('alert', {
+{{ component('ui_suite_bootstrap:alert', {
+ 'message': 'Your shopping cart is empty.'|t,
+}, {
'variant': 'info',
- 'message': 'Your shopping cart is empty.'|t
}) }}
diff --git a/templates/commerce/checkout/commerce-checkout-form--with-sidebar.html.twig b/templates/commerce/checkout/commerce-checkout-form--with-sidebar.html.twig
index 2843f71edd30d5fe9787919f28c103f69e8f249a..313c71e4867ce8ff148f64cf82ed5824b0e530b7 100644
--- a/templates/commerce/checkout/commerce-checkout-form--with-sidebar.html.twig
+++ b/templates/commerce/checkout/commerce-checkout-form--with-sidebar.html.twig
@@ -18,15 +18,17 @@
</div>
</div>
<div class="col col-12 col-md-4">
- {{ pattern('card', {
- 'variant': 'default',
+ {{ component('ui_suite_bootstrap:card', {
'content': [
- pattern('card_body', {
- 'heading_level': 3,
+ component('ui_suite_bootstrap:card_body', {
'title': 'Order summary'|t,
- 'content': form.sidebar
+ 'content': form.sidebar,
+ }, {
+ 'heading_level': 3,
})
]
+ }, {
+ 'variant': 'default',
}) }}
</div>
</div>
diff --git a/templates/commerce/checkout/commerce-checkout-progress.html.twig b/templates/commerce/checkout/commerce-checkout-progress.html.twig
index a6a2df08a0b0f718df4c560af59a2729c0dbb73c..0aa4e8dfd0304853411f788ded5f2343e37119b5 100644
--- a/templates/commerce/checkout/commerce-checkout-progress.html.twig
+++ b/templates/commerce/checkout/commerce-checkout-progress.html.twig
@@ -24,10 +24,11 @@
%}
{% set list_group_item_attributes = create_attribute() %}
{% set items = items|merge([
- pattern('list_group_item', {
- 'variant': 'primary',
+ component('ui_suite_bootstrap:list_group_item', {
+ 'content': step.label,
+ }, {
'attributes': list_group_item_attributes.addClass(list_group_item_classes),
- 'content': step.label
+ 'variant': 'primary',
})
]) %}
{% endfor %}
@@ -39,8 +40,9 @@
]
%}
{% set list_group_attributes = create_attribute() %}
-{{ pattern('list_group', {
- 'variant': 'numbered__horizontal',
+{{ component('ui_suite_bootstrap:list_group', {
+ 'items': items,
+}, {
'attributes': list_group_attributes.addClass(list_group_classes),
- 'items': items
+ 'variant': 'numbered__horizontal',
}) }}
diff --git a/templates/menu/menu-local-tasks.html.twig b/templates/menu/menu-local-tasks.html.twig
index 7aa08bbb7ca026fbd89db44036a7534f013e4fb9..6c474f81f124e48ff195f1d9928a871e1815c6f2 100644
--- a/templates/menu/menu-local-tasks.html.twig
+++ b/templates/menu/menu-local-tasks.html.twig
@@ -15,15 +15,15 @@
#}
{% if primary %}
<h2 class="visually-hidden">{{ 'Primary tabs'|t }}</h2>
- {{ pattern('nav', {
+ {{ component('ui_suite_bootstrap:nav', {}, {
'variant': 'tabs',
- 'items': preprocessed_items_primary
+ 'items': preprocessed_items_primary,
}) }}
{% endif %}
{% if secondary %}
<h2 class="visually-hidden">{{ 'Secondary tabs'|t }}</h2>
- {{ pattern('nav', {
+ {{ component('ui_suite_bootstrap:nav', {}, {
'variant': 'tabs',
- 'items': preprocessed_items_secondary
+ 'items': preprocessed_items_secondary,
}) }}
{% endif %}
diff --git a/templates/menu/menu.html.twig b/templates/menu/menu.html.twig
index f72f382f1ae69e39c652fb4375ec5664abf8b411..8b1be1cf2463c35226aab879eae094c85a5f0058 100644
--- a/templates/menu/menu.html.twig
+++ b/templates/menu/menu.html.twig
@@ -19,8 +19,8 @@
* Define a custom macro that will render all menu trees.
*/
#}
-{{ pattern('navbar_nav', {
+{{ component('ui_suite_bootstrap:navbar_nav', {}, {
+ 'attributes': attributes.addClass(classes ?: ['menu', 'menu--' ~ menu_name|clean_class]),
'variant': 'default',
'items': items,
- 'attributes': attributes.addClass(classes ?: ['menu', 'menu--' ~ menu_name|clean_class]),
}) }}
diff --git a/templates/region/region--help.html.twig b/templates/region/region--help.html.twig
index ae795f73dc058ff7037d65c8df87e7ed996dd097..cae377457435b712af12f6ba1f97b2862f6fe5dd 100644
--- a/templates/region/region--help.html.twig
+++ b/templates/region/region--help.html.twig
@@ -16,10 +16,11 @@
#}
{% if content %}
- {{ pattern('alert', {
- 'variant': 'info',
+ {{ component('ui_suite_bootstrap:alert', {
+ 'message': content
+ }, {
'attributes': attributes,
- 'message': content,
- 'dismissible': false
+ 'variant': 'info',
+ 'dismissible': false,
}) }}
{% endif %}
diff --git a/templates/system/breadcrumb.html.twig b/templates/system/breadcrumb.html.twig
index 4bfe2a1b41345b65bf2b3f2d3dae6fccb4095183..53bc91554cb0878a618b826318220a6c6c245f7c 100644
--- a/templates/system/breadcrumb.html.twig
+++ b/templates/system/breadcrumb.html.twig
@@ -10,7 +10,7 @@
*/
#}
{% if breadcrumb %}
- {{ pattern('breadcrumb', {
- 'items': breadcrumb
+ {{ component('ui_suite_bootstrap:breadcrumb', {}, {
+ 'items': breadcrumb,
}) }}
{% endif %}
diff --git a/templates/system/mark.html.twig b/templates/system/mark.html.twig
index 7dbdc89fa8c2fabca620d1e18071d41168165276..eba4b7a33b16aeb4d36cb0edc356b3ede1e48a4a 100644
--- a/templates/system/mark.html.twig
+++ b/templates/system/mark.html.twig
@@ -15,21 +15,23 @@
#}
{% if logged_in %}
{% if status is constant('MARK_NEW') %}
- {{ pattern('badge', {
+ {{ component('ui_suite_bootstrap:badge', {
'label': 'New'|t,
+ }, {
'attributes': create_attribute({
'class': [
'text-bg-light'
- ]
+ ],
}),
}) }}
{% elseif status is constant('MARK_UPDATED') %}
- {{ pattern('badge', {
+ {{ component('ui_suite_bootstrap:badge', {
'label': 'Updated'|t,
+ }, {
'attributes': create_attribute({
'class': [
'text-bg-info'
- ]
+ ],
}),
}) }}
{% endif %}
diff --git a/templates/system/page.html.twig b/templates/system/page.html.twig
index b680f090662227595112f8fd6c44c577a7899e9a..8d324848e28bd442b4d34514777044a1606081dc 100644
--- a/templates/system/page.html.twig
+++ b/templates/system/page.html.twig
@@ -49,13 +49,14 @@
{% if page.navigation or page.navigation_collapsible %}
{% block navbar %}
<div class="{{ container }} bg-light">
- {{ pattern('navbar', {
+ {{ component('ui_suite_bootstrap:navbar', {
+ navigation: page.navigation,
+ navigation_collapsible: page.navigation_collapsible,
+ }, {
variant: 'expand_lg',
placement: 'default',
- toggler_position: 'end',
toggle_action: 'collapse',
- navigation: page.navigation,
- navigation_collapsible: page.navigation_collapsible,
+ toggler_position: 'end',
}) }}
</div>
{% endblock %}
diff --git a/templates/system/pager.html.twig b/templates/system/pager.html.twig
index 603f229b1c76dda9e3ed61783e22b816e2955e2b..162c6e7e036db67dac5635c87e8546d0779b87b8 100644
--- a/templates/system/pager.html.twig
+++ b/templates/system/pager.html.twig
@@ -34,8 +34,8 @@
*/
#}
{% if items %}
- {{ pattern('pagination', {
- 'items': preprocessed_items,
+ {{ component('ui_suite_bootstrap:pagination', {}, {
'attributes': attributes.addClass('js-pager__items'),
+ 'items': preprocessed_items,
}) }}
{% endif %}
diff --git a/templates/system/progress-bar.html.twig b/templates/system/progress-bar.html.twig
index 4c148add70dd20101cfeb9713772d0f51864eb50..aceddd60a6c5b4aa153c12d00daacc123256ddeb 100644
--- a/templates/system/progress-bar.html.twig
+++ b/templates/system/progress-bar.html.twig
@@ -16,12 +16,13 @@
<div class="progress__label">{{ label }}</div>
{% endif %}
- {{ pattern('progress', {
- variant: 'striped__animated',
- attributes: attributes,
+ {{ component('ui_suite_bootstrap:progress', {
label: percent,
+ }, {
+ attributes: attributes,
+ variant: 'striped__animated',
aria_label: label,
- percent: percent
+ percent: percent,
}) }}
{% if message %}
diff --git a/templates/system/status-messages.html.twig b/templates/system/status-messages.html.twig
index 491fff72110c0b54c9e9bd581c0aa39dfa5115bc..6ae3500dd9e2c3e434aaa8c6702b90de87ba796d 100644
--- a/templates/system/status-messages.html.twig
+++ b/templates/system/status-messages.html.twig
@@ -36,11 +36,12 @@
messages by changing the main attributes object.
#}
{% set pattern_attributes = create_attribute(attributes.toArray()) %}
- {{ pattern('alert', {
- 'variant': variant,
- 'attributes': pattern_attributes,
+ {{ component('ui_suite_bootstrap:alert', {
'message': message,
- 'dismissible': true
+ }, {
+ 'attributes': pattern_attributes,
+ 'variant': variant,
+ 'dismissible': true,
}) }}
{% endfor %}
diff --git a/templates/system/table.html.twig b/templates/system/table.html.twig
index 9cfe0d67f769081786552c1732f5acbaee4d3b5e..d72b9647592377fa7be80f1ae84349b275cfce9f 100644
--- a/templates/system/table.html.twig
+++ b/templates/system/table.html.twig
@@ -62,11 +62,12 @@
{% set active = cell.active_table_sort ?: false %}
{% set active = active ?: cell.attributes.hasClass('is-active') %}
{% set prepared_header = prepared_header|merge([
- pattern('table_cell', {
+ component('ui_suite_bootstrap:table_cell', {
+ 'content': cell.content,
+ }, {
'attributes': cell.attributes,
+ 'active': active,
'tag': cell.tag,
- 'content': cell.content,
- 'active': active
})
]) %}
{% endfor %}
@@ -79,19 +80,21 @@
{% set active = cell.active_table_sort ?: false %}
{% set active = active ?: cell.attributes.hasClass('is-active') %}
{% set prepared_cells = prepared_cells|merge([
- pattern('table_cell', {
+ component('ui_suite_bootstrap:table_cell', {
+ 'content': cell.content,
+ }, {
'attributes': cell.attributes,
+ 'active': active,
'tag': cell.tag,
- 'content': cell.content,
- 'active': active
})
]) %}
{% endfor %}
{% set prepared_rows = prepared_rows|merge([
- pattern('table_row', {
+ component('ui_suite_bootstrap:table_row', {
+ 'cells': prepared_cells,
+ }, {
'attributes': row.attributes,
- 'cells': prepared_cells
})
]) %}
{% endfor %}
@@ -104,26 +107,35 @@
{% set active = cell.active_table_sort ?: false %}
{% set active = active ?: cell.attributes.hasClass('is-active') %}
{% set prepared_cells = prepared_cells|merge([
- pattern('table_cell', {
+ component('ui_suite_bootstrap:table_cell', {
+ 'content': cell.content,
+ }, {
'attributes': cell.attributes,
+ 'active': active,
'tag': cell.tag,
- 'content': cell.content,
- 'active': active
})
]) %}
{% endfor %}
{% set prepared_footer = prepared_footer|merge([
- pattern('table_row', {
+ component('ui_suite_bootstrap:table_row', {
+ 'cells': prepared_cells,
+ }, {
'attributes': row.attributes,
- 'cells': prepared_cells
})
]) %}
{% endfor %}
-{{ pattern('table', {
- variant: 'default',
+{{ component('ui_suite_bootstrap:table', {
+ caption: caption,
+ header: prepared_header,
+ colgroups: colgroups,
+ rows: prepared_rows,
+ footer: prepared_footer,
+ empty: empty,
+}, {
attributes: attributes,
+ variant: 'default',
header_color: header_color,
footer_color: footer_color,
stripes: stripes,
@@ -131,12 +143,6 @@
hover: hover,
responsive: responsive,
divider: divider,
- caption: caption,
caption_top: caption_top,
- header: prepared_header,
header_columns: header_columns,
- colgroups: colgroups,
- rows: prepared_rows,
- footer: prepared_footer,
- empty: empty
}) }}
diff --git a/templates/ui_styles_library/ui-styles-overview-page.html.twig b/templates/ui_styles_library/ui-styles-overview-page.html.twig
index 461220e397cac1d0a72cb940b85b4a627b5e22cf..8029a4611144172685e838c08bf8f89701519a9c 100644
--- a/templates/ui_styles_library/ui-styles-overview-page.html.twig
+++ b/templates/ui_styles_library/ui-styles-overview-page.html.twig
@@ -27,14 +27,15 @@
<button class="btn btn-primary position-fixed bottom-0 end-0 mb-2 me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#menu-styles" aria-controls="menu-styles">
{{ 'Navigation'|t }}
</button>
- {{ pattern('offcanvas', {
+ {{ component('ui_suite_bootstrap:offcanvas', {
+ title: 'Available styles'|t,
+ body: content,
+ }, {
variant: 'start',
- offcanvas_id: 'menu-styles',
backdrop: 'false',
- scroll: true,
heading_level: 2,
- title: 'Available styles'|t,
- body: content
+ offcanvas_id: 'menu-styles',
+ scroll: true,
}) }}
<div class="row">
diff --git a/templates/views/views-mini-pager.html.twig b/templates/views/views-mini-pager.html.twig
index 74f7fb785f9c7efc96c258bd9f9a199e625e5335..f4abda917cf81795c05e113236be1209dab9c798 100644
--- a/templates/views/views-mini-pager.html.twig
+++ b/templates/views/views-mini-pager.html.twig
@@ -14,8 +14,8 @@
*/
#}
{% if items.previous or items.next %}
- {{ pattern('pagination', {
- 'items': preprocessed_items,
+ {{ component('ui_suite_bootstrap:pagination', {}, {
'attributes': attributes.addClass('js-pager__items'),
+ 'items': preprocessed_items,
}) }}
{% endif %}
diff --git a/templates/views/views-view-table.html.twig b/templates/views/views-view-table.html.twig
index a718ca90981019d699c3c44dff6da59555a9af12..20e74ea2a2f711fac1ab3550bae6d6a681cdce08 100644
--- a/templates/views/views-view-table.html.twig
+++ b/templates/views/views-view-table.html.twig
@@ -105,11 +105,12 @@
{% endset %}
{% set prepared_header = prepared_header|merge([
- pattern('table_cell', {
+ component('ui_suite_bootstrap:table_cell', {
+ 'content': column_content,
+ }, {
'attributes': column.attributes.addClass(column_classes).setAttribute('scope', 'col'),
+ 'active': active,
'tag': 'th',
- 'content': column_content,
- 'active': active
})
]) %}
{% endfor %}
@@ -151,34 +152,37 @@
{% endset %}
{% set prepared_columns = prepared_columns|merge([
- pattern('table_cell', {
- 'attributes': column.attributes.addClass(column_classes),
+ component('ui_suite_bootstrap:table_cell', {
'content': column_content,
- 'active': active
+ }, {
+ 'attributes': column.attributes.addClass(column_classes),
+ 'active': active,
})
]) %}
{% endfor %}
{% set prepared_rows = prepared_rows|merge([
- pattern('table_row', {
+ component('ui_suite_bootstrap:table_row', {
+ 'cells': prepared_columns,
+ }, {
'attributes': row.attributes,
- 'cells': prepared_columns
})
- ]) %}
+ ]) %}
{% endfor %}
-{{ pattern('table', {
- variant: 'default',
+{{ component('ui_suite_bootstrap:table', {
+ caption: caption,
+ header: prepared_header,
+ rows: prepared_rows,
+}, {
attributes: attributes.addClass(classes),
+ variant: 'default',
header_color: header_color,
stripes: stripes,
borders: borders,
hover: hover,
responsive: responsive,
divider: divider,
- caption: caption,
caption_top: caption_top,
- header: prepared_header,
header_columns: header|length,
- rows: prepared_rows
}) }}
diff --git a/ui_suite_bootstrap.info.yml b/ui_suite_bootstrap.info.yml
index 8290fa093143963c581f1bd3828045ac02c947bd..8458cabb234701a8ebca091a70a074c6ded36263 100644
--- a/ui_suite_bootstrap.info.yml
+++ b/ui_suite_bootstrap.info.yml
@@ -6,7 +6,6 @@ base theme: false
dependencies:
- layout_options:layout_options
- ui_patterns:ui_patterns
- - ui_patterns:ui_patterns_legacy
- ui_styles:ui_styles
regions: