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 %}
-
- {% endfor %}
+ {% if vertical %}
+ {% set items_per_column = _items|length/_type %}
+ {% for column in _items|batch(items_per_column) %}
+
+ {% endfor %}
+ {% else %}
+ {% for _item in _items %}
+
+ {% 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