diff --git a/templates/compositions/ec-component-content-item-block/content-item-block.html.twig b/templates/compositions/ec-component-content-item-block/content-item-block.html.twig index eb4a88d4ea..5fb208fdab 100644 --- a/templates/compositions/ec-component-content-item-block/content-item-block.html.twig +++ b/templates/compositions/ec-component-content-item-block/content-item-block.html.twig @@ -42,14 +42,14 @@ {% endif %} {% set _extra_classes_item = 'ecl-col-12' %} -{% if _type == 'two' %} - {% set _extra_classes_item = 'ecl-col-12 ecl-col-l-6' %} -{% elseif _type == 'three' %} - {% set _extra_classes_item = 'ecl-col-12 ecl-col-l-4' %} -{% elseif _type == 'four' %} - {% set _extra_classes_item = 'ecl-col-12 ecl-col-l-3' %} -{% elseif _type == 'six' %} - {% set _extra_classes_item = 'ecl-col-12 ecl-col-l-2' %} +{% if _type == 2 %} + {% set _extra_classes_item = _extra_classes_item ~ ' ecl-col-l-6' %} +{% elseif _type == 3 %} + {% set _extra_classes_item = _extra_classes_item ~ ' ecl-col-l-4' %} +{% elseif _type == 4 %} + {% set _extra_classes_item = _extra_classes_item ~ ' ecl-col-l-3' %} +{% elseif _type == 6 %} + {% set _extra_classes_item = _extra_classes_item ~ ' ecl-col-l-2' %} {% endif %}
@@ -62,11 +62,24 @@ {% endif %}
- {% for _item in _items %} -
- {{ _item }} -
- {% endfor %} + {% if vertical %} + {% set items_per_column = _items|length/_type %} + {% for column in _items|batch(items_per_column) %} +
+ {% for _item in column %} +
+ {{ _item }} +
+ {% endfor %} +
+ {% endfor %} + {% else %} + {% for _item in _items %} +
+ {{ _item }} +
+ {% endfor %} + {% endif %}
{% if _button.path %} diff --git a/templates/patterns/list_item_blocks/list_item_block_four_columns.ui_patterns.yml b/templates/patterns/list_item_blocks/list_item_block_four_columns.ui_patterns.yml index 6cfaacf961..95137e90e6 100644 --- a/templates/patterns/list_item_blocks/list_item_block_four_columns.ui_patterns.yml +++ b/templates/patterns/list_item_blocks/list_item_block_four_columns.ui_patterns.yml @@ -77,3 +77,8 @@ list_item_block_four_columns: label: "External link" description: "Whether the Button URL is external or not." preview: false + vertical: + type: "boolean" + label: "Vertical order" + description: "Whether the items to be ordered from top to bottom instead of left to right." + preview: true diff --git a/templates/patterns/list_item_blocks/list_item_block_one_column.ui_patterns.yml b/templates/patterns/list_item_blocks/list_item_block_one_column.ui_patterns.yml index 9f4caa842d..1ee748839f 100644 --- a/templates/patterns/list_item_blocks/list_item_block_one_column.ui_patterns.yml +++ b/templates/patterns/list_item_blocks/list_item_block_one_column.ui_patterns.yml @@ -52,3 +52,8 @@ list_item_block_one_column: label: "External link" description: "Whether the Button URL is external or not." preview: true + vertical: + type: "boolean" + label: "Vertical order" + description: "Whether the items to be ordered from top to bottom instead of left to right." + preview: true diff --git a/templates/patterns/list_item_blocks/list_item_block_six_columns.ui_patterns.yml b/templates/patterns/list_item_blocks/list_item_block_six_columns.ui_patterns.yml index 4db4809491..414e49c1e7 100644 --- a/templates/patterns/list_item_blocks/list_item_block_six_columns.ui_patterns.yml +++ b/templates/patterns/list_item_blocks/list_item_block_six_columns.ui_patterns.yml @@ -54,3 +54,8 @@ list_item_block_six_columns: label: "External link" description: "Whether the Button URL is external or not." preview: true + vertical: + type: "boolean" + label: "Vertical order" + description: "Whether the items to be ordered from top to bottom instead of left to right." + preview: false diff --git a/templates/patterns/list_item_blocks/list_item_block_three_columns.ui_patterns.yml b/templates/patterns/list_item_blocks/list_item_block_three_columns.ui_patterns.yml index b54db223b0..33afc5efde 100644 --- a/templates/patterns/list_item_blocks/list_item_block_three_columns.ui_patterns.yml +++ b/templates/patterns/list_item_blocks/list_item_block_three_columns.ui_patterns.yml @@ -67,3 +67,8 @@ list_item_block_three_columns: label: "External link" description: "Whether the Button URL is external or not." preview: true + vertical: + type: "boolean" + label: "Vertical order" + description: "Whether the items to be ordered from top to bottom instead of left to right." + preview: true diff --git a/templates/patterns/list_item_blocks/list_item_block_two_columns.ui_patterns.yml b/templates/patterns/list_item_blocks/list_item_block_two_columns.ui_patterns.yml index 14bf458dda..ddc4e6320e 100644 --- a/templates/patterns/list_item_blocks/list_item_block_two_columns.ui_patterns.yml +++ b/templates/patterns/list_item_blocks/list_item_block_two_columns.ui_patterns.yml @@ -57,3 +57,8 @@ list_item_block_two_columns: label: "External link" description: "Whether the Button URL is external or not." preview: false + vertical: + type: "boolean" + label: "Vertical order" + description: "Whether the items to be ordered from top to bottom instead of left to right." + preview: true diff --git a/templates/patterns/list_item_blocks/pattern-list-item-block-four-columns.html.twig b/templates/patterns/list_item_blocks/pattern-list-item-block-four-columns.html.twig index b1fcec9929..64dbf3a362 100644 --- a/templates/patterns/list_item_blocks/pattern-list-item-block-four-columns.html.twig +++ b/templates/patterns/list_item_blocks/pattern-list-item-block-four-columns.html.twig @@ -10,7 +10,7 @@ {% set _button_icon_position = 'after' %} {% endif %} {% include '@oe_theme/compositions/ec-component-content-item-block/content-item-block.html.twig' with { - type: 'four', + type: 4, title: title, items: items, icon_path: ecl_icon_path, @@ -19,5 +19,6 @@ label: button_label, icon_name: button_icon_name, icon_position: _button_icon_position - } + }, + vertical: vertical|default(false) } only %} diff --git a/templates/patterns/list_item_blocks/pattern-list-item-block-one-column.html.twig b/templates/patterns/list_item_blocks/pattern-list-item-block-one-column.html.twig index 9629b648a8..5185140e5d 100644 --- a/templates/patterns/list_item_blocks/pattern-list-item-block-one-column.html.twig +++ b/templates/patterns/list_item_blocks/pattern-list-item-block-one-column.html.twig @@ -10,7 +10,7 @@ {% set _button_icon_position = 'after' %} {% endif %} {% include '@oe_theme/compositions/ec-component-content-item-block/content-item-block.html.twig' with { - type: 'one', + type: 1, title: title, items: items, icon_path: ecl_icon_path, @@ -19,5 +19,6 @@ label: button_label, icon_name: button_icon_name, icon_position: _button_icon_position - } + }, + vertical: vertical|default(false) } only %} diff --git a/templates/patterns/list_item_blocks/pattern-list-item-block-six-columns.html.twig b/templates/patterns/list_item_blocks/pattern-list-item-block-six-columns.html.twig index d2113890bc..9cb150faa6 100644 --- a/templates/patterns/list_item_blocks/pattern-list-item-block-six-columns.html.twig +++ b/templates/patterns/list_item_blocks/pattern-list-item-block-six-columns.html.twig @@ -10,7 +10,7 @@ {% set _button_icon_position = 'after' %} {% endif %} {% include '@oe_theme/compositions/ec-component-content-item-block/content-item-block.html.twig' with { - type: 'six', + type: 6, title: title, items: items, icon_path: ecl_icon_path, @@ -19,5 +19,6 @@ label: button_label, icon_name: button_icon_name, icon_position: _button_icon_position - } + }, + vertical: vertical|default(false) } only %} diff --git a/templates/patterns/list_item_blocks/pattern-list-item-block-three-columns.html.twig b/templates/patterns/list_item_blocks/pattern-list-item-block-three-columns.html.twig index 00dbcffe93..a1624d86db 100644 --- a/templates/patterns/list_item_blocks/pattern-list-item-block-three-columns.html.twig +++ b/templates/patterns/list_item_blocks/pattern-list-item-block-three-columns.html.twig @@ -10,7 +10,7 @@ {% set _button_icon_position = 'after' %} {% endif %} {% include '@oe_theme/compositions/ec-component-content-item-block/content-item-block.html.twig' with { - type: 'three', + type: 3, title: title, items: items, icon_path: ecl_icon_path, @@ -19,5 +19,6 @@ label: button_label, icon_name: button_icon_name, icon_position: _button_icon_position - } + }, + vertical: vertical|default(false) } only %} diff --git a/templates/patterns/list_item_blocks/pattern-list-item-block-two-columns.html.twig b/templates/patterns/list_item_blocks/pattern-list-item-block-two-columns.html.twig index 0c555b1b7e..71596c09e6 100644 --- a/templates/patterns/list_item_blocks/pattern-list-item-block-two-columns.html.twig +++ b/templates/patterns/list_item_blocks/pattern-list-item-block-two-columns.html.twig @@ -10,7 +10,7 @@ {% set _button_icon_position = 'after' %} {% endif %} {% include '@oe_theme/compositions/ec-component-content-item-block/content-item-block.html.twig' with { - type: 'two', + type: 2, title: title, items: items, icon_path: ecl_icon_path, @@ -19,5 +19,6 @@ label: button_label, icon_name: button_icon_name, icon_position: _button_icon_position - } + }, + vertical: vertical|default(false) } only %} diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml index 7dd3fcb9f1..7888207056 100644 --- a/tests/src/Kernel/fixtures/rendering.yml +++ b/tests/src/Kernel/fixtures/rendering.yml @@ -1635,24 +1635,40 @@ '#fields': title: "List item 3" detail: "Description for list item 3." + - '#type': "pattern" + '#id': "list_item" + '#fields': + title: "List item 4" + detail: "Description for list item 4." + - '#type': "pattern" + '#id': "list_item" + '#fields': + title: "List item 5" + detail: "Description for list item 5." + vertical: true assertions: count: 'div.ecl-content-item-block__title': 0 'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': 0 - 'div.ecl-content-item-block__item': 3 + 'div.ecl-content-item-block__item': 8 'div.ecl-content-item-block__item.ecl-col-l-6': 0 - 'div.ecl-content-item-block__item.ecl-col-l-4': 3 + 'div.ecl-content-item-block__item.ecl-u-mb-s.ecl-col-12.ecl-col-l-4': 3 'div.ecl-content-item-block__item.ecl-col-l-6 article.ecl-content-item': 0 - 'div.ecl-content-item-block__item.ecl-col-l-4 article.ecl-content-item': 3 + 'div.ecl-content-item-block__item.ecl-u-mb-s.ecl-col-12.ecl-col-l-4 div.ecl-content-item-block__item.ecl-u-mb-s': 5 + 'div.ecl-content-item-block__item.ecl-col-l-4 article.ecl-content-item': 5 'div.ecl-content-item-block__button': 0 'div.ecl-content-item-block__button a.ecl-link[href="http://example.com"]': 0 equals: - 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "List item 1" - 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "Description for list item 1." - 'div.ecl-content-item-block__item:nth-child(2) article.ecl-content-item div.ecl-content-item__title': "List item 2" - 'div.ecl-content-item-block__item:nth-child(2) article.ecl-content-item div.ecl-content-item__description': "Description for list item 2." - 'div.ecl-content-item-block__item:nth-child(3) article.ecl-content-item div.ecl-content-item__title': "List item 3" - 'div.ecl-content-item-block__item:nth-child(3) article.ecl-content-item div.ecl-content-item__description': "Description for list item 3." + 'div.ecl-content-item-block__item.ecl-col-12.ecl-col-l-4:nth-child(1) div.ecl-content-item-block__item.ecl-u-mb-s:nth-child(1) article div.ecl-content-item__title': "List item 1" + 'div.ecl-content-item-block__item.ecl-col-12.ecl-col-l-4:nth-child(1) div.ecl-content-item-block__item.ecl-u-mb-s:nth-child(1) article div.ecl-content-item__description': "Description for list item 1." + 'div.ecl-content-item-block__item.ecl-col-12.ecl-col-l-4:nth-child(1) div.ecl-content-item-block__item.ecl-u-mb-s:nth-child(2) article div.ecl-content-item__title': "List item 2" + 'div.ecl-content-item-block__item.ecl-col-12.ecl-col-l-4:nth-child(1) div.ecl-content-item-block__item.ecl-u-mb-s:nth-child(2) article div.ecl-content-item__description': "Description for list item 2." + 'div.ecl-content-item-block__item.ecl-col-12.ecl-col-l-4:nth-child(2) div.ecl-content-item-block__item.ecl-u-mb-s:nth-child(1) article div.ecl-content-item__title': "List item 3" + 'div.ecl-content-item-block__item.ecl-col-12.ecl-col-l-4:nth-child(2) div.ecl-content-item-block__item.ecl-u-mb-s:nth-child(1) article div.ecl-content-item__description': "Description for list item 3." + 'div.ecl-content-item-block__item.ecl-col-12.ecl-col-l-4:nth-child(2) div.ecl-content-item-block__item.ecl-u-mb-s:nth-child(2) article div.ecl-content-item__title': "List item 4" + 'div.ecl-content-item-block__item.ecl-col-12.ecl-col-l-4:nth-child(2) div.ecl-content-item-block__item.ecl-u-mb-s:nth-child(2) article div.ecl-content-item__description': "Description for list item 4." + 'div.ecl-content-item-block__item.ecl-col-12.ecl-col-l-4:nth-child(3) div.ecl-content-item-block__item.ecl-u-mb-s:nth-child(1) article div.ecl-content-item__title': "List item 5" + 'div.ecl-content-item-block__item.ecl-col-12.ecl-col-l-4:nth-child(3) div.ecl-content-item-block__item.ecl-u-mb-s:nth-child(1) article div.ecl-content-item__description': "Description for list item 5." - array: '#type': pattern '#id': list_item_block_three_columns @@ -1673,6 +1689,16 @@ '#fields': title: "List item 3" detail: "Description for list item 3." + - '#type': "pattern" + '#id': "list_item" + '#fields': + title: "List item 4" + detail: "Description for list item 4." + - '#type': "pattern" + '#id': "list_item" + '#fields': + title: "List item 5" + detail: "Description for list item 5." button_label: "View all" button_url: "http://example.com" button_icon_name: "language" @@ -1681,11 +1707,11 @@ count: 'div.ecl-content-item-block__title': 0 'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': 0 - 'div.ecl-content-item-block__item': 3 + 'div.ecl-content-item-block__item': 5 'div.ecl-content-item-block__item.ecl-col-l-6': 0 - 'div.ecl-content-item-block__item.ecl-col-l-4': 3 + 'div.ecl-content-item-block__item.ecl-col-l-4': 5 'div.ecl-content-item-block__item.ecl-col-l-6 article.ecl-content-item': 0 - 'div.ecl-content-item-block__item.ecl-col-l-4 article.ecl-content-item': 3 + 'div.ecl-content-item-block__item.ecl-col-l-4 article.ecl-content-item': 5 'div.ecl-content-item-block__button': 1 'div.ecl-content-item-block__button a.ecl-link.ecl-link--standalone.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1 equals: @@ -1695,6 +1721,10 @@ 'div.ecl-content-item-block__item:nth-child(2) article.ecl-content-item div.ecl-content-item__description': "Description for list item 2." 'div.ecl-content-item-block__item:nth-child(3) article.ecl-content-item div.ecl-content-item__title': "List item 3" 'div.ecl-content-item-block__item:nth-child(3) article.ecl-content-item div.ecl-content-item__description': "Description for list item 3." + 'div.ecl-content-item-block__item:nth-child(4) article.ecl-content-item div.ecl-content-item__title': "List item 4" + 'div.ecl-content-item-block__item:nth-child(4) article.ecl-content-item div.ecl-content-item__description': "Description for list item 4." + 'div.ecl-content-item-block__item:nth-child(5) article.ecl-content-item div.ecl-content-item__title': "List item 5" + 'div.ecl-content-item-block__item:nth-child(5) article.ecl-content-item div.ecl-content-item__description': "Description for list item 5." 'a.ecl-link': 'View all' - array: '#type': pattern