Merge pull request #1497 from openeuropa/EWPP-4710

EWPP-4710: Allow adding a button separator for list item block patterns.
openeuropa · Sep 3, 2024 · 8ca194d · 8ca194d
2 parents c0bb077 + aea5aea
commit 8ca194d
Show file tree

Hide file tree

Showing 12 changed files with 54 additions and 0 deletions.
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
@@ -11,6 +11,7 @@ Parameters:
   - "introduction" (string) (default: ''): A brief summary of the block.
   - "items" (array) (default: []): Content Item's for the Content Item Block
   - "button" (associative array) (default: {}): Predefined structure compatible with Link component.
+  - "button_separator" (boolean) (default: false): Whether to add a button separator.
   - "extra_classes" (string) (default: '')
   - "extra_attributes" (array) (default: []): format: [
       {
@@ -111,6 +112,9 @@ Parameters:
   </div>
 
   {% if _button.label %}
+    {% if button_separator %}
+      <div class="ecl-u-border-color-neutral ecl-u-border-width-1 ecl-u-border-top"></div>
+    {% endif %}
     <div class="ecl-row">
       <div class="ecl-content-item-block__button ecl-col-12">
         <div class="ecl-u-clearfix ecl-u-pv-m">

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
@@ -78,6 +78,11 @@ list_item_block_four_columns:
       label: "Icon position"
       description: "The position of the icon"
       preview: 'before'
+    button_separator:
+      type: "text"
+      label: "Button separator"
+      description: "Whether to add a separator line between the items and the button."
+      preview: true
     external_link:
       type: "boolean"
       label: "External link"

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
@@ -53,6 +53,11 @@ list_item_block_one_column:
       label: "Icon position"
       description: "The position of the icon"
       preview: 'after'
+    button_separator:
+      type: "text"
+      label: "Button separator"
+      description: "Whether to add a separator line between the items and the button."
+      preview: true
     external_link:
       type: "boolean"
       label: "External link"

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
@@ -55,6 +55,11 @@ list_item_block_six_columns:
       label: "Icon position"
       description: "The position of the icon"
       preview: 'after'
+    button_separator:
+      type: "text"
+      label: "Button separator"
+      description: "Whether to add a separator line between the items and the button."
+      preview: false
     external_link:
       type: "boolean"
       label: "External link"

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
@@ -68,6 +68,11 @@ list_item_block_three_columns:
       label: "Icon position"
       description: "The position of the icon"
       preview: 'after'
+    button_separator:
+      type: "text"
+      label: "Button separator"
+      description: "Whether to add a separator line between the items and the button."
+      preview: true
     external_link:
       type: "boolean"
       label: "External link"

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
@@ -58,6 +58,11 @@ list_item_block_two_columns:
       label: "Icon position"
       description: "The position of the icon"
       preview: 'after'
+    button_separator:
+      type: "text"
+      label: "Button separator"
+      description: "Whether to add a separator line between the items and the button."
+      preview: false
     external_link:
       type: "boolean"
       label: "External link"

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
@@ -23,5 +23,6 @@
     icon_position: _button_icon_position,
     transform: _button_icon_name == 'arrow-left' ? 'rotate-180' : ''
   },
+  button_separator: button_separator|default(false),
   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
@@ -23,5 +23,6 @@
     icon_position: _button_icon_position,
     transform: _button_icon_name == 'arrow-left' ? 'rotate-180' : ''
   },
+  button_separator: button_separator|default(false),
   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
@@ -23,5 +23,6 @@
     icon_position: _button_icon_position,
     transform: _button_icon_name == 'arrow-left' ? 'rotate-180' : ''
   },
+  button_separator: button_separator|default(false),
   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
@@ -23,5 +23,6 @@
     icon_position: _button_icon_position,
     transform: _button_icon_name == 'arrow-left' ? 'rotate-180' : ''
   },
+  button_separator: button_separator|default(false),
   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
@@ -23,5 +23,6 @@
     icon_position: _button_icon_position,
     transform: _button_icon_name == 'arrow-left' ? 'rotate-180' : ''
   },
+  button_separator: button_separator|default(false),
   vertical: vertical|default(false)
 } only %}
diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml
@@ -2005,6 +2005,7 @@
             title: "Business, Economy, Euro"
             detail: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
       button_label: "Button nolink"
+      button_separator: true
   assertions:
     count:
       'div.ecl-content-item-block__title': 1
@@ -2019,6 +2020,7 @@
       'div.ecl-content-item-block__item.ecl-col-m-4 article.ecl-content-item': 0
       'div.ecl-content-item-block__button .ecl-u-clearfix': 1
       'div.ecl-content-item-block__button a.ecl-link--icon.ecl-link--standalone svg': 0
+      'div.ecl-u-border-color-neutral.ecl-u-border-width-1.ecl-u-border-top': 1
     equals:
       'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': "Block title"
       'div.ecl-content-item-block__introduction': "<p>The Introduction to the list</p>"
@@ -2040,6 +2042,7 @@
       button_icon_position: 'before'
       button_icon_name: 'list'
       external_link: true
+      button_separator: false
   assertions:
     count:
       'div.ecl-content-item-block__title': 0
@@ -2055,6 +2058,7 @@
       'div.ecl-content-item-block__button': 1
       'div.ecl-content-item-block__button a.ecl-link[href="http://example.com"]': 1
       'div.ecl-content-item-block__button a.ecl-link--standalone svg': 1
+      'div.ecl-u-border-color-neutral.ecl-u-border-width-1.ecl-u-border-top': 0
     equals:
       'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__content-block div.ecl-content-block__title': "Business, Economy, Euro"
       'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-block__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
@@ -2105,6 +2109,7 @@
           '#fields':
             title: "Business, Economy, Euro"
             detail: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
+      button_separator: true
   assertions:
     count:
       'div.ecl-content-item-block__title': 0
@@ -2119,6 +2124,7 @@
       'div.ecl-content-item-block__item.ecl-col-m-4 article.ecl-content-item': 0
       'div.ecl-content-item-block__button': 0
       'div.ecl-content-item-block__button a.ecl-link[href="http://example.com"]': 0
+      'div.ecl-u-border-color-neutral.ecl-u-border-width-1.ecl-u-border-top': 0
     equals:
       'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__content-block div.ecl-content-block__title': "Business, Economy, Euro"
       'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-block__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
@@ -2204,6 +2210,7 @@
           '#fields':
             title: "List item 2"
             detail: "Description for list item 2."
+      button_separator: true
   assertions:
     count:
       'div.ecl-content-item-block__title': 0
@@ -2216,6 +2223,7 @@
       'div.ecl-content-item-block__item.ecl-col-l-4 article.ecl-content-item': 0
       'div.ecl-content-item-block__button': 0
       'div.ecl-content-item-block__button a.ecl-link[href="http://example.com"]': 0
+      'div.ecl-u-border-color-neutral.ecl-u-border-width-1.ecl-u-border-top': 0
     equals:
       'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__content-block div.ecl-content-block__title': "List item 1"
       'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-block__description': "Description for list item 1."
@@ -2241,6 +2249,7 @@
       button_label: "View all"
       button_url: "http://example.com"
       external_link: false
+      button_separator: true
   assertions:
     count:
       'div.ecl-content-item-block__title': 0
@@ -2253,6 +2262,7 @@
       'div.ecl-content-item-block__item.ecl-col-l-4 article.ecl-content-item': 0
       'div.ecl-content-item-block__button': 1
       'div.ecl-content-item-block__button a.ecl-link.ecl-link--standalone.ecl-link--icon[href="http://example.com"]': 1
+      'div.ecl-u-border-color-neutral.ecl-u-border-width-1.ecl-u-border-top': 1
     equals:
       'div.ecl-content-item-block__introduction': "<p>The Introduction to the list</p>"
       'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__content-block div.ecl-content-block__title': "List item 1"
@@ -2291,6 +2301,7 @@
             title: "List item 5"
             detail: "Description for list item 5."
       vertical: true
+      button_separator: true
   assertions:
     count:
       'div.ecl-content-item-block__title': 0
@@ -2304,6 +2315,7 @@
       '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
+      'div.ecl-u-border-color-neutral.ecl-u-border-width-1.ecl-u-border-top': 0
     equals:
       '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-l:nth-child(1) article div.ecl-content-block__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-l:nth-child(1) article div.ecl-content-block__description': "Description for list item 1."
@@ -2350,6 +2362,7 @@
       button_label: "View all"
       button_url: "http://example.com"
       button_icon_position: "after"
+      button_separator: true
   assertions:
     count:
       'div.ecl-content-item-block__title': 0
@@ -2362,6 +2375,7 @@
       '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[href="http://example.com"]': 1
+      'div.ecl-u-border-color-neutral.ecl-u-border-width-1.ecl-u-border-top': 1
     equals:
       'div.ecl-content-item-block__introduction': "<p>The Introduction to the list</p>"
       'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__content-block div.ecl-content-block__title': "List item 1"
@@ -2390,7 +2404,10 @@
       button_url: "http://example.com"
       button_icon_name: "list"
       button_icon_position: "before"
+      button_separator: true
   assertions:
+    count:
+      'div.ecl-u-border-color-neutral.ecl-u-border-width-1.ecl-u-border-top': 1
     equals:
       'div.ecl-content-item-block__introduction': "<p>The Introduction to the list</p>"
       'div.ecl-content-item-block__item.ecl-col-l-3:nth-child(1) a.ecl-link': 'A simple link 1'
@@ -2415,7 +2432,10 @@
       button_url: "http://example.com"
       button_icon_name: "list"
       button_icon_position: "before"
+      button_separator: true
   assertions:
+    count:
+      'div.ecl-u-border-color-neutral.ecl-u-border-width-1.ecl-u-border-top': 1
     equals:
       'div.ecl-content-item-block__introduction': "<p>The Introduction to the list</p>"
       'div.ecl-content-item-block__item.ecl-col-l-2:nth-child(1) a.ecl-link': 'A simple link 1'