diff --git a/package.json b/package.json
index 55257a0ddd..f70b0b197b 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
"@ecl/twig-component-inpage-navigation": "3.1.2",
"@ecl/twig-component-language-list": "3.1.2",
"@ecl/twig-component-link": "3.1.2",
+ "@ecl/twig-component-list-illustration": "3.1.2",
"@ecl/twig-component-media-container": "3.1.2",
"@ecl/twig-component-menu": "3.1.2",
"@ecl/twig-component-message": "3.1.2",
diff --git a/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml b/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml
new file mode 100644
index 0000000000..a64e284295
--- /dev/null
+++ b/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml
@@ -0,0 +1,52 @@
+list_with_illustration:
+ label: "List with illustration"
+ description: "A list of items with associated illustrations."
+ variants:
+ vertical_images_large:
+ label: "Vertical with images (large)"
+ description: "Vertical list with large images."
+ vertical_images_square:
+ label: "Vertical with images (square)"
+ description: "Vertical list with square images."
+ vertical_icons:
+ label: "Vertical with icons"
+ description: "Vertical list with icons."
+ horizontal_images_large:
+ label: "Horizontal with images (large)"
+ description: "Horizontal list with large images."
+ horizontal_images_square:
+ label: "Horizontal with images (square)"
+ description: "Horizontal list with square images."
+ horizontal_icons:
+ label: "Horizontal with icons"
+ description: "Horizontal list with icons."
+ fields:
+ column:
+ type: "numeric"
+ label: "Column number"
+ description: "Number of columns (only applies to horizontal variants). Maximum of 4 columns."
+ preview: 4
+ escape: false
+ zebra:
+ type: "boolean"
+ label: "Zebra"
+ description: "Use zebra background (only applies to vertical variants)."
+ preview: true
+ items:
+ type: "array"
+ label: "Items"
+ description: "Array of list items"
+ preview:
+ - title: "Business, Economy, Euro"
+ description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
+ image:
+ src: "https://placeimg.com/1000/500/arch"
+ alt: "Alternative text for featured item image"
+ icon: "growth"
+ - title: "About the European Union"
+ description: "The EU and its institutions, how to visit and work at the EU."
+ image:
+ src: "https://placeimg.com/1000/500/arch"
+ alt: "Alternative text for featured item image"
+ icon: "budget"
+
diff --git a/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig b/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
new file mode 100644
index 0000000000..f4ff6b78b7
--- /dev/null
+++ b/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
@@ -0,0 +1,42 @@
+{#
+/**
+ * @file
+ * List with illustration.
+ */
+#}
+
+{# Set the columns to 1 if vertical variants. #}
+{% if 'vertical' in variant %}
+ {% set column = 1 %}
+{% endif %}
+
+{# Set the zebra to false if horizontal variants. #}
+{% if 'horizontal' in variant %}
+ {% set zebra = false %}
+{% endif %}
+
+{% set _items = [] %}
+{% for item in items %}
+ {% if 'icon' in variant %}
+ {# Remove image information if an icon variant. #}
+ {% set _item = item|merge({'image': {}}) %}
+ {# Transform icon into ecl array. #}
+ {% if _item.icon %}
+ {% set _item = _item|merge({'icon': to_ecl_icon(item.icon)}) %}
+ {% endif %}
+ {% elseif 'image' in variant %}
+ {# Remove icon information if an image variant. #}
+ {% set _item = item|merge({'icon': {}}) %}
+ {# Make images square if square variant. #}
+ {% if _item.image and 'square' in variant %}
+ {% set _image = _item.image|merge({'squared': true}) %}
+ {% set _item = _item|merge({'image': _image}) %}
+ {% endif %}
+ {% endif %}
+ {% set _items = _items|merge([_item]) %}
+{% endfor %}
+{% include '@ecl-twig/list-illustration' with {
+ 'column': column,
+ 'zebra': zebra,
+ 'items': _items,
+} only %}
diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml
index 941f7bc2fe..dc016d26d9 100644
--- a/tests/src/Kernel/fixtures/rendering.yml
+++ b/tests/src/Kernel/fixtures/rendering.yml
@@ -1,2952 +1,186 @@
-- array:
- '#plain_text': 'Dummy placeholder for form rendering test.'
- assert:
- count:
- 'form.ecl-form': 1
-- array:
- '#type': button
- '#value': Preview
- assert:
- contains:
- - 'Preview'
- count:
- 'button.ecl-button.ecl-button': 1
-- array:
- '#type': textfield
- '#value': Textfield
- assert:
- contains:
- - 'Textfield'
- count:
- 'input.form-text.ecl-text-input': 1
-- array:
- '#type': password
- '#value': Password
- assert:
- contains:
- - 'password'
- count:
- 'input.form-text.ecl-text-input': 1
-- array:
- '#type': email
- '#value': Email
- assert:
- contains:
- - 'Email'
- count:
- 'input.form-email.ecl-text-input': 1
-- array:
- '#type': textarea
- '#title': Textarea
- '#value': Text
- assert:
- contains:
- - 'Textarea'
- - 'Text'
- count:
- 'textarea.form-textarea.ecl-text-area': 1
-- array:
- '#type': select
- '#title': Select element
- '#options':
- 1: One
- 2: Two
- 3: Three
- assert:
- contains:
- - 'Select element'
- - ''
- - ''
- - ''
- count:
- 'div.ecl-select__container.ecl-select__container--m': 1
- 'select.form-select.ecl-select': 1
-- array:
- '#type': radios
- '#title': Radios
- '#title_display': above
- '#default_value': 1
- '#id': test-radios
- '#options':
- 0: Closed
- 1: Active
- assert:
- contains:
- - 'Radios'
- count:
- 'div#test-radios': 1
-- array:
- '#type': radios
- '#title': Radios
- '#set_validation_error': true
- '#default_value': 1
- '#id': test-radios
- '#options':
- 0: Closed
- 1: Active
- assertions:
- contains:
- - 'Radio'
- count:
- 'div.ecl-radio__group--invalid': 1
-- array:
- '#type': checkbox
- '#title': Checkbox
- '#attributes':
- 'foo': bar
- assert:
- contains:
- - 'Checkbox'
- - 'foo="bar"'
- count:
- 'label.ecl-checkbox__label': 1
- 'input.ecl-checkbox__input': 1
- 'span.ecl-checkbox__box': 1
-- array:
- '#type': checkbox
- '#title': Checkbox
- '#disabled': true
- assert:
- contains:
- - 'Checkbox'
- count:
- 'div.ecl-checkbox.ecl-checkbox--disabled': 1
-- array:
- '#type': checkbox
- '#title': Checkbox
- '#set_validation_error': true
- assert:
- contains:
- - 'Checkbox'
- count:
- 'div.ecl-checkbox.ecl-checkbox--invalid': 1
-- array:
- '#type': radio
- '#title': Radio
- '#attributes':
- 'foo': bar
- assert:
- contains:
- - 'Radio'
- - 'foo="bar"'
- count:
- 'div.ecl-radio label.ecl-radio__label': 1
- 'div.ecl-radio span.ecl-radio__box': 1
-- array:
- '#type': radio
- '#title': Radio
- '#disabled': true
- assert:
- contains:
- - 'Radio'
- count:
- 'div.ecl-radio--disabled label.ecl-radio__label': 1
- 'div.ecl-radio--disabled input[disabled]': 1
-- array:
- '#type': pattern
- '#id': banner_hero
- '#fields':
- banner_type: "image"
- image:
- src: "http://via.placeholder.com/150x150"
- title: "Banner title"
- url: "http://example.com"
- label: "Subscribe"
- description: "Banner description"
- centered: true
- assertions:
- count:
- 'section.ecl-hero-banner.ecl-hero-banner--image.ecl-hero-banner--centered': 1
- 'div.ecl-hero-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
- 'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
- 'div.ecl-hero-banner__image[style="background-image:url(http://via.placeholder.com/150x150)"]': 1
- '.ecl-hero-banner--full-width': 0
- equals:
- 'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content div.ecl-hero-banner__title': Banner title
- 'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content p.ecl-hero-banner__description': Banner description
- 'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Subscribe
-- array:
- '#type': pattern
- '#id': banner_hero
- '#fields':
- banner_type: "primary"
- image:
- src: "http://via.placeholder.com/150x150"
- title: "Banner title"
- url: "http://example.com"
- label: "Subscribe"
- description: "Banner description"
- centered: false
- full_width: true
- assertions:
- count:
- 'section.ecl-hero-banner.ecl-hero-banner--primary.ecl-hero-banner--full-width': 1
- 'div.ecl-hero-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
- 'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
- 'div.ecl-hero-banner__image[style="background-image:url(http://via.placeholder.com/150x150)"]': 0
- equals:
- 'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content div.ecl-hero-banner__title': Banner title
- 'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content p.ecl-hero-banner__description': Banner description
- 'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Subscribe
-- array:
- '#type': pattern
- '#id': banner_hero
- '#fields':
- banner_type: "default"
- title: "Backwards compatibility test"
- url: "http://example.com"
- label: "Subscribe"
- description: "Banner description"
- centered: false
- alignment: "center"
- full_width: false
- assertions:
- count:
- 'section.ecl-hero-banner.ecl-hero-banner--default.ecl-hero-banner--centered': 1
- 'div.ecl-hero-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
- 'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
- '.ecl-hero-banner--full-width': 0
- equals:
- 'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content div.ecl-hero-banner__title': "Backwards compatibility test"
- 'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content p.ecl-hero-banner__description': "Banner description"
- 'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Subscribe
-- array:
- '#type': pattern
- '#id': banner_hero
- '#variant': ""
- '#fields':
- title: "Banner title"
- description: "Banner description"
- url: "http://example.com"
- label: "Example"
- image:
- src: "http://via.placeholder.com/150x150"
- alignment: "center"
- full_width: false
- assertions:
- count:
- 'section.ecl-hero-banner.ecl-hero-banner--primary.ecl-hero-banner--centered': 1
- 'div.ecl-hero-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
- 'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
- 'div.ecl-hero-banner__image[style="background-image:url(http://via.placeholder.com/150x150)"]': 0
- '.ecl-hero-banner--full-width': 0
- equals:
- 'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content div.ecl-hero-banner__title': Banner title
- 'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content p.ecl-hero-banner__description': Banner description
- 'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Example
-- array:
- '#type': pattern
- '#id': banner_hero
- '#variant': "image"
- '#fields':
- title: "Banner title"
- description: "Banner description"
- url: "http://example.com"
- label: "Example"
- image:
- src: "http://via.placeholder.com/150x150"
- alignment: "left"
- full_width: false
- assertions:
- count:
- 'section.ecl-hero-banner.ecl-hero-banner--image.ecl-hero-banner--centered': 0
- 'section.ecl-hero-banner.ecl-hero-banner--image': 1
- 'div.ecl-hero-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
- 'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
- 'div.ecl-hero-banner__image[style="background-image:url(http://via.placeholder.com/150x150)"]': 1
- '.ecl-hero-banner--full-width': 0
- equals:
- 'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content div.ecl-hero-banner__title': Banner title
- 'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content p.ecl-hero-banner__description': Banner description
- 'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Example
-- array:
- '#type': pattern
- '#id': banner_hero
- '#variant': "image-shade"
- '#fields':
- title: "Banner title"
- description: "Banner description"
- url: "http://example.com"
- label: "Example"
- image:
- src: "http://via.placeholder.com/150x150"
- alignment: "center"
- full_width: true
- assertions:
- count:
- 'section.ecl-hero-banner.ecl-hero-banner--image-shade.ecl-hero-banner--centered.ecl-hero-banner--full-width': 1
- 'div.ecl-hero-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
- 'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
- 'div.ecl-hero-banner__image[style="background-image:url(http://via.placeholder.com/150x150)"]': 1
- equals:
- 'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content div.ecl-hero-banner__title': Banner title
- 'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content p.ecl-hero-banner__description': Banner description
- 'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Example
-- array:
- '#type': pattern
- '#id': banner_hero
- '#variant': "primary"
- '#fields':
- title: "Banner title"
- description: "Banner description"
- url: "http://example.com"
- label: "Example"
- image:
- src: "http://via.placeholder.com/150x150"
- alignment: "left"
- full_width: true
- assertions:
- count:
- 'section.ecl-hero-banner.ecl-hero-banner--primary.ecl-hero-banner--centered': 0
- 'section.ecl-hero-banner.ecl-hero-banner--primary.ecl-hero-banner--full-width': 1
- 'div.ecl-hero-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
- 'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
- 'div.ecl-hero-banner__image[style="background-image:url(http://via.placeholder.com/150x150)"]': 0
- equals:
- 'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content div.ecl-hero-banner__title': Banner title
- 'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content p.ecl-hero-banner__description': Banner description
- 'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Example
-- array:
- '#type': pattern
- '#id': banner_page
- '#variant': ""
- '#fields':
- title: "Banner title"
- description: "Banner description"
- url: "http://example.com"
- label: "Example"
- image:
- src: "http://via.placeholder.com/150x150"
- alignment: "center"
- assertions:
- count:
- 'section.ecl-page-banner.ecl-page-banner--primary.ecl-page-banner--centered': 1
- 'div.ecl-page-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
- 'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
- 'div.ecl-page-banner__image[style="background-image:url(http://via.placeholder.com/150x150)"]': 0
- '.ecl-page-banner--full-width': 0
- equals:
- 'div.ecl-container div.ecl-page-banner__container div.ecl-page-banner__content div.ecl-page-banner__title': Banner title
- 'div.ecl-container div.ecl-page-banner__container div.ecl-page-banner__content p.ecl-page-banner__description': Banner description
- 'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Example
-- array:
- '#type': pattern
- '#id': banner_page
- '#variant': "primary"
- '#fields':
- title: "Banner title"
- description: "Banner description"
- url: "http://example.com"
- label: "Example"
- image:
- src: "http://via.placeholder.com/150x150"
- alignment: "left"
- full_width: true
- assertions:
- count:
- 'section.ecl-page-banner.ecl-page-banner--primary.ecl-page-banner--centered': 0
- 'section.ecl-page-banner.ecl-page-banner--primary.ecl-page-banner--full-width': 1
- 'div.ecl-page-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
- 'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
- 'div.ecl-page-banner__image[style="background-image:url(http://via.placeholder.com/150x150)"]': 0
- equals:
- 'div.ecl-container div.ecl-page-banner__container div.ecl-page-banner__content div.ecl-page-banner__title': Banner title
- 'div.ecl-container div.ecl-page-banner__container div.ecl-page-banner__content p.ecl-page-banner__description': Banner description
- 'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Example
-- array:
- '#type': pattern
- '#id': banner_page
- '#variant': "image"
- '#fields':
- title: "Banner title"
- description: "Banner description"
- url: "http://example.com"
- label: "Example"
- image:
- src: "http://via.placeholder.com/150x150"
- alignment: "center"
- full_width: false
- assertions:
- count:
- 'section.ecl-page-banner.ecl-page-banner--image.ecl-page-banner--centered': 1
- 'div.ecl-page-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
- 'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
- 'div.ecl-page-banner__image[style="background-image:url(http://via.placeholder.com/150x150)"]': 1
- '.ecl-page-banner--full-width': 0
- equals:
- 'div.ecl-container div.ecl-page-banner__container div.ecl-page-banner__content div.ecl-page-banner__title': Banner title
- 'div.ecl-container div.ecl-page-banner__container div.ecl-page-banner__content p.ecl-page-banner__description': Banner description
- 'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Example
-- array:
- '#type': pattern
- '#id': banner_page
- '#variant': "image-shade"
- '#fields':
- title: "Banner title"
- description: "Banner description"
- url: "http://example.com"
- label: "Example"
- image:
- src: "http://via.placeholder.com/150x150"
- alignment: "left"
- full_width: false
- assertions:
- count:
- 'section.ecl-page-banner.ecl-page-banner--image-shade.ecl-page-banner--centered': 0
- 'section.ecl-page-banner.ecl-page-banner--image-shade': 1
- 'div.ecl-page-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
- 'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
- 'div.ecl-page-banner__image[style="background-image:url(http://via.placeholder.com/150x150)"]': 1
- '.ecl-page-banner--full-width': 0
- equals:
- 'div.ecl-container div.ecl-page-banner__container div.ecl-page-banner__content div.ecl-page-banner__title': Banner title
- 'div.ecl-container div.ecl-page-banner__container div.ecl-page-banner__content p.ecl-page-banner__description': Banner description
- 'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Example
-- array:
- '#type': pattern
- '#id': banner_video
- '#fields':
- video:
- description: "Video caption"
- image: "https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
- alt: "Jean Monnet banner."
- sources:
- - src: "https://defiris.ec.streamcloud.be/findmedia/11/101631/LR_I101631INT1W.mp4?latest=0004553892"
- src_type: "video/mp4"
- description: "Banner description"
- assertions:
- count:
- 'section.ecl-video-banner': 1
- 'video.ecl-media-container__media[poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"]': 1
- 'source[src="https://defiris.ec.streamcloud.be/findmedia/11/101631/LR_I101631INT1W.mp4?latest=0004553892"][type="video/mp4"]': 1
- equals:
- 'figcaption.ecl-media-container__caption': 'Video caption'
- 'p.ecl-u-type-paragraph': "Banner description"
-- array:
- '#type': pattern
- '#id': file
- '#fields':
- button_label: "Download"
- file:
- title: "File title example"
- name: "document.pdf"
- url: "http://example.com"
- mime: "application/pdf"
- size: "10000"
- language_code: "en"
- assertions:
- count:
- 'svg.ecl-file__icon': 1
- 'a.ecl-file__download[href="http://example.com"]': 1
- equals:
- 'div.ecl-file__title': "File title example"
- 'div.ecl-file__language': "English"
- 'div.ecl-file__meta': "(9.77 KB - PDF)"
- 'a.ecl-file__download .ecl-link__label': "Download"
-- array:
- '#type': pattern
- '#id': file_translation
- '#fields':
- button_label: "Download"
- file:
- variant: "translation"
- title: "File title example"
- name: "document.pdf"
- url: "http://example.com"
- mime: "application/pdf"
- size: "10000"
- language_code: "en"
- translations:
- - mime: "application/vnd.ms-excel"
- url: "http://example.com/document_fr.xls"
- size: "150000"
- name: "document.xls"
- language_code: "fr"
- - mime: "application/vnd.ms-powerpoint"
- url: "http://example.com/document_it.ppt"
- size: "160000"
- name: "document.ppt"
- language_code: "it"
- - mime: "application/pdf"
- url: "http://example.com/document_hu.pdf"
- size: "170000"
- name: "document.pdf"
- language_code: "hu"
- translation_toggle_label: "Other translations"
- more_info: "Custom information snippet."
- assertions:
- count:
- 'svg.ecl-file__icon': 1
- 'a.ecl-file__download[href="http://example.com"]': 1
- 'div.ecl-file__translation-container': 1
- 'li.ecl-file__translation-item a.ecl-file__translation-download': 3
- 'a.ecl-file__translation-download[href="http://example.com/document_fr.xls"]': 1
- 'a.ecl-file__translation-download[href="http://example.com/document_it.ppt"]': 1
- 'a.ecl-file__translation-download[href="http://example.com/document_hu.pdf"]': 1
- equals:
- 'div.ecl-file__title': "File title example"
- 'div.ecl-file__language': "English"
- 'div.ecl-file__meta': "(9.77 KB - PDF)"
- 'a.ecl-file__download .ecl-link__label': "Download"
- 'button.ecl-file__translation-toggle .ecl-button__label': "Other translations (3)"
- '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-title': "français"
- '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-meta': "(146.48 KB - XLS)"
- '.ecl-file__translation-item:nth-child(2) div.ecl-file__translation-title': "italiano"
- '.ecl-file__translation-item:nth-child(2) div.ecl-file__translation-meta': "(156.25 KB - PPT)"
- '.ecl-file__translation-item:nth-child(3) div.ecl-file__translation-title': "magyar"
- '.ecl-file__translation-item:nth-child(3) div.ecl-file__translation-meta': "(166.02 KB - PDF)"
- '.ecl-file__translation-description': "Custom information snippet."
-- array:
- '#type': pattern
- '#id': file_translation
- '#fields':
- button_label: "Download"
- file:
- variant: "translation"
- title: "File title example"
- name: "document.pdf"
- url: "http://example.com"
- mime: "application/pdf"
- size: "10000"
- language_code: "en"
- translations:
- - mime: "application/vnd.ms-excel"
- url: "http://example.com/document_fr.xls"
- size: "150000"
- name: "document.xls"
- language_code: "fr"
- more_info: "Custom information snippet."
- assertions:
- count:
- 'svg.ecl-file__icon': 1
- 'a.ecl-file__download[href="http://example.com"]': 1
- 'div.ecl-file__translation-container': 1
- 'li.ecl-file__translation-item a.ecl-file__translation-download': 1
- 'a.ecl-file__translation-download[href="http://example.com/document_fr.xls"]': 1
- equals:
- 'div.ecl-file__title': "File title example"
- 'div.ecl-file__language': "English"
- 'div.ecl-file__meta': "(9.77 KB - PDF)"
- 'a.ecl-file__download .ecl-link__label': "Download"
- 'button.ecl-file__translation-toggle .ecl-button__label': "Available translations (1)"
- '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-title': "français"
- '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-meta': "(146.48 KB - XLS)"
- '.ecl-file__translation-description': "Custom information snippet."
-- array:
- '#type': pattern
- '#id': file_teaser
- '#fields':
- button_label: "Download"
- teaser: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur. Duis vitae pulvinar turpis. Donec maximus pharetra ex a ultricies."
- file:
- title: "Example document"
- name: "document.pdf"
- url: "http://example.com"
- mime: "application/pdf"
- size: "140000"
- language_code: "en"
- thumbnail:
- src: "https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
- alt: "thumbnail alt"
- resource_type: "RESOURCE TYPE"
- publication_date: "2020-31-08"
- translations:
- - teaser: "Morbi fringilla turpis augue, et interdum ipsum egestas sed. Proin tristique, ante id aliquet malesuada, lorem dolor vulputate magna, a commodo purus ante nec massa."
- file:
- title: "French translation"
- mime: "application/vnd.ms-excel"
- url: "http://example.com/document_fr.xls"
- size: "150000"
- name: "document.xls"
- language_code: "fr"
- - teaser: "Proin sagittis nisi hendrerit purus porta, at suscipit est hendrerit. Duis facilisis augue imperdiet, pharetra nisl sed, molestie nulla."
- file:
- title: "Italian translation"
- mime: "application/vnd.ms-powerpoint"
- url: "http://example.com/document_it.ppt"
- size: "160000"
- name: "document.ppt"
- language_code: "it"
- - teaser: "Duis eget lacinia arcu. Nullam mattis ornare nibh. Proin tristique, ante id aliquet malesuada. Pellentesque porttitor commodo libero sed fringilla. Curabitur varius sodales elit, id tincidunt erat. Aenean tincidunt luctus molestie."
- file:
- title: "Hungarian translation"
- mime: "application/pdf"
- url: "http://example.com/document_hu.pdf"
- size: "170000"
- name: "document.pdf"
- language_code: "hu"
- translation_toggle_label: "Other translations"
- more_info: "Looking for another language which is not on the list? Find out why."
- assertions:
- count:
- 'img.ecl-file__image[src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"]': 1
- 'img.ecl-file__image[alt="thumbnail alt"]': 1
- 'a.ecl-file__download[href="http://example.com"]': 1
- 'div.ecl-file.ecl-file--thumbnail': 1
- 'div.ecl-file__container div.ecl-file__detail div.ecl-file__detail-info': 1
- 'div.ecl-file__container div.ecl-file__info': 1
- 'div.ecl-file__translation-container': 1
- 'ul.ecl-file__translation-list': 1
- 'li.ecl-file__translation-item a.ecl-file__translation-download': 3
- 'a.ecl-file__translation-download[href="http://example.com/document_fr.xls"]': 1
- 'a.ecl-file__translation-download[href="http://example.com/document_it.ppt"]': 1
- 'a.ecl-file__translation-download[href="http://example.com/document_hu.pdf"]': 1
- equals:
- 'div.ecl-file__detail-info div.ecl-file__title': "Example document"
- 'div.ecl-file__detail-info div.ecl-file__description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur. Duis vitae pulvinar turpis. Donec maximus pharetra ex a ultricies.'
- 'div.ecl-file__detail-info div.ecl-file__detail-meta span.ecl-file__detail-meta-item:nth-child(1)': 'RESOURCE TYPE'
- 'div.ecl-file__detail-info div.ecl-file__detail-meta span.ecl-file__detail-meta-item:nth-child(2)': '2020-31-08'
- 'div.ecl-file__info div.ecl-file__language': "English"
- 'div.ecl-file__info div.ecl-file__meta': "(136.72 KB - PDF)"
- 'a.ecl-file__download .ecl-link__label': "Download"
- 'button.ecl-file__translation-toggle .ecl-button__label': "Other translations (3)"
- '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-title': "French translation"
- '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-description': "Morbi fringilla turpis augue, et interdum ipsum egestas sed. Proin tristique, ante id aliquet malesuada, lorem dolor vulputate magna, a commodo purus ante nec massa."
- '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-language': "français"
- '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-meta': "(146.48 KB - XLS)"
- '.ecl-file__translation-item:nth-child(1) .ecl-link__label': "Download"
- '.ecl-file__translation-item:nth-child(2) div.ecl-file__translation-title': "Italian translation"
- '.ecl-file__translation-item:nth-child(2) div.ecl-file__translation-description': "Proin sagittis nisi hendrerit purus porta, at suscipit est hendrerit. Duis facilisis augue imperdiet, pharetra nisl sed, molestie nulla."
- '.ecl-file__translation-item:nth-child(2) div.ecl-file__translation-language': "italiano"
- '.ecl-file__translation-item:nth-child(2) div.ecl-file__translation-meta': "(156.25 KB - PPT)"
- '.ecl-file__translation-item:nth-child(2) .ecl-link__label': "Download"
- '.ecl-file__translation-item:nth-child(3) div.ecl-file__translation-title': "Hungarian translation"
- '.ecl-file__translation-item:nth-child(3) div.ecl-file__translation-description': "Duis eget lacinia arcu. Nullam mattis ornare nibh. Proin tristique, ante id aliquet malesuada. Pellentesque porttitor commodo libero sed fringilla. Curabitur varius sodales elit, id tincidunt erat. Aenean tincidunt luctus molestie."
- '.ecl-file__translation-item:nth-child(3) div.ecl-file__translation-language': "magyar"
- '.ecl-file__translation-item:nth-child(3) div.ecl-file__translation-meta': "(166.02 KB - PDF)"
- '.ecl-file__translation-item:nth-child(3) .ecl-link__label': "Download"
- 'li.ecl-file__translation-item.ecl-file__translation-description': "Looking for another language which is not on the list? Find out why."
-- array:
- '#type': pattern
- '#id': file_teaser
- '#fields':
- button_label: "Download"
- teaser: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur. Duis vitae pulvinar turpis. Donec maximus pharetra ex a ultricies."
- file:
- title: "Example document"
- name: "document.pdf"
- url: "http://example.com"
- mime: "application/pdf"
- size: "140000"
- language_code: "en"
- thumbnail:
- src: "https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
- alt: "thumbnail alt"
- resource_type: "RESOURCE TYPE"
- publication_date: "2020-31-08"
- translations:
- - teaser: "Morbi fringilla turpis augue, et interdum ipsum egestas sed. Proin tristique, ante id aliquet malesuada, lorem dolor vulputate magna, a commodo purus ante nec massa."
- file:
- title: "French translation"
- mime: "application/vnd.ms-excel"
- url: "http://example.com/document_fr.xls"
- size: "150000"
- name: "document.xls"
- language_code: "fr"
- lists:
- - term: "Keywords"
- definition:
- - label: 'Apple'
- - label: 'Orange'
- more_info: "Looking for another language which is not on the list? Find out why."
- length: 10
- assertions:
- count:
- 'img.ecl-file__image[src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"]': 1
- 'img.ecl-file__image[alt="thumbnail alt"]': 1
- 'a.ecl-file__download[href="http://example.com"]': 1
- 'div.ecl-file.ecl-file--thumbnail': 1
- 'div.ecl-file__container div.ecl-file__detail div.ecl-file__detail-info': 1
- 'div.ecl-file__container div.ecl-file__info': 1
- 'div.ecl-file__translation-container': 1
- 'ul.ecl-file__translation-list': 1
- 'li.ecl-file__translation-item a.ecl-file__translation-download': 1
- 'a.ecl-file__translation-download[href="http://example.com/document_fr.xls"]': 1
- 'div.ecl-file__taxonomy': 1
- 'dl.ecl-description-list--taxonomy': 1
- 'dt.ecl-description-list__term': 1
- 'dd.ecl-description-list__definition': 1
- 'span.ecl-description-list__tag': 2
- equals:
- 'div.ecl-file__detail-info div.ecl-file__title': "Example document"
- 'div.ecl-file__detail-info div.ecl-file__description': 'Lorem...'
- 'div.ecl-file__detail-info div.ecl-file__detail-meta span.ecl-file__detail-meta-item:nth-child(1)': 'RESOURCE TYPE'
- 'div.ecl-file__detail-info div.ecl-file__detail-meta span.ecl-file__detail-meta-item:nth-child(2)': '2020-31-08'
- 'div.ecl-file__info div.ecl-file__language': "English"
- 'div.ecl-file__info div.ecl-file__meta': "(136.72 KB - PDF)"
- 'a.ecl-file__download .ecl-link__label': "Download"
- 'button.ecl-file__translation-toggle .ecl-button__label': "Available translations (1)"
- '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-title': "French translation"
- '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-description': "Morbi..."
- '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-language': "français"
- '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-meta': "(146.48 KB - XLS)"
- '.ecl-file__translation-item:nth-child(1) .ecl-link__label': "Download"
- 'li.ecl-file__translation-item.ecl-file__translation-description': "Looking for another language which is not on the list? Find out why."
- 'dt.ecl-description-list__term': 'Keywords'
- 'span.ecl-description-list__tag:nth-child(1)': 'Apple'
- 'span.ecl-description-list__tag:nth-child(2)': 'Orange'
-- array:
- '#type': pattern
- '#id': file_image
- '#fields':
- variant: "image"
- src: "https://placehold.it/450x250"
- alt: "placeholder image"
- caption: "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit."
- assertions:
- count:
- 'figure.ecl-media-container': 1
- 'img.ecl-media-container__media[src="https://placehold.it/450x250"]': 1
- equals:
- 'figcaption.ecl-media-container__caption': "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit."
-- array:
- '#type': pattern
- '#id': file_video
- '#fields':
- variant: "video"
- src: "//defiris.ec.streamcloud.be/findmedia/11/101631/LR_I101631INT1W.mp4?latest=0004553892"
- src_type: "video/mp4"
- caption: "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit."
- tracks:
- src': ""
- kind': "captions"
- src_lang': "en"
- label': "English"
- assertions:
- count:
- 'figure.ecl-media-container': 1
- 'video.ecl-media-container__media': 1
- 'video.ecl-media-container__media source[src="//defiris.ec.streamcloud.be/findmedia/11/101631/LR_I101631INT1W.mp4?latest=0004553892"]': 1
- 'video.ecl-media-container__media source[type="video/mp4"]': 1
- 'video.ecl-media-container__media track[kind="captions"]': 1
- 'video.ecl-media-container__media track[label="English"]': 1
- 'video.ecl-media-container__media track[srclang="en"]': 1
- equals:
- 'figcaption.ecl-media-container__caption': "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit."
-- array:
- '#type': pattern
- '#id': gallery
- '#variant': default
- '#fields':
- items:
- - thumbnail:
- src: 'https://loremflickr.com/320/240/cat'
- alt: 'Example alt text'
- source: 'https://loremflickr.com/800/600/cat'
- caption: 'A picture of a cat'
- meta: 'Copyright © 2021, Author and Licence'
- media_type: 'image'
- assertions:
- count:
- '.ecl-gallery': 1
- '.ecl-gallery .ecl-gallery__list': 1
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item': 1
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item .ecl-gallery__image[src="https://loremflickr.com/320/240/cat"]': 1
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item .ecl-gallery__image[alt="Example alt text"]': 1
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item figcaption.ecl-gallery__description': 1
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item .ecl-gallery__meta': 1
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item figcaption.ecl-gallery__description svg.ecl-icon': 1
- '.ecl-gallery .ecl-button.ecl-button--ghost.ecl-gallery__slider-previous': 0
- '.ecl-gallery .ecl-button.ecl-button--ghost.ecl-gallery__slider-next': 0
- equals:
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item .ecl-gallery__meta': 'Copyright © 2021, Author and Licence'
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item svg.ecl-icon': ''
- contains:
- - 'A picture of a cat'
-- array:
- '#type': pattern
- '#id': gallery
- '#variant': default
- '#fields':
- items:
- - thumbnail:
- src: 'https://loremflickr.com/320/240/cat'
- alt: 'Example alt text cat'
- source: 'https://loremflickr.com/800/600/cat'
- caption: 'A picture of a cat'
- type: 'image'
- - thumbnail:
- src: 'https://loremflickr.com/320/240/dog'
- alt: 'Example alt text dog'
- source: 'https://www.youtube.com/watch?v=1-g73ty9v04'
- caption: "Energy, let's save it!"
- meta: 'Copyright © 2021 EC'
- type: 'video'
- assertions:
- count:
- '.ecl-gallery': 1
- '.ecl-gallery .ecl-gallery__list': 1
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item': 2
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) .ecl-gallery__image[src="https://loremflickr.com/320/240/cat"]': 1
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) .ecl-gallery__image[alt="Example alt text cat"]': 1
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) figcaption.ecl-gallery__description': 1
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) .ecl-gallery__meta': 0
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) .ecl-gallery__image-container figcaption.ecl-gallery__description svg.ecl-icon': 1
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) a.ecl-gallery__item-link[href="https://www.youtube.com/watch?v=1-g73ty9v04"]': 1
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__image[src="https://loremflickr.com/320/240/dog"]': 1
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__image[alt="Example alt text dog"]': 1
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) figcaption.ecl-gallery__description': 1
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__meta': 1
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__image-container figcaption.ecl-gallery__description svg.ecl-icon': 1
- '.ecl-gallery .ecl-button.ecl-button--ghost.ecl-gallery__slider-previous': 1
- '.ecl-gallery .ecl-button.ecl-button--ghost.ecl-gallery__slider-next': 1
- equals:
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) .ecl-gallery__image-container svg.ecl-icon': ''
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__meta': 'Copyright © 2021 EC'
- '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__image-container figcaption.ecl-gallery__description svg.ecl-icon': ''
- contains:
- - 'A picture of a cat'
- - 'Energy, let's save it!'
-- array:
- '#type': pattern
- '#id': list_item
- '#fields':
- url: "http://example.com"
- title: "Item title"
- detail: "Item text"
- meta:
- - "Meta 1"
- - "Meta 2"
- assertions:
- count:
- 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
- 'article.ecl-content-item div[role="img"].ecl-u-d-l-block': 0
- 'article.ecl-content-item div.ecl-content-item__image__before': 0
- 'article.ecl-content-item div.ecl-content-item__image__after': 0
- equals:
- 'article.ecl-content-item div.ecl-content-item__meta': "Meta 1 | Meta 2"
- 'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title"
- 'article.ecl-content-item div.ecl-content-item__description': "Item text"
-- array:
- '#type': pattern
- '#id': list_item
- '#fields':
- url: "http://example.com"
- title: "Item title"
- detail: "Item text"
- length: 6
- meta:
- - "Meta 1"
- assertions:
- count:
- 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
- 'article.ecl-content-item div[role="img"].ecl-u-d-l-block': 0
- 'article.ecl-content-item div.ecl-content-item__image__before': 0
- 'article.ecl-content-item div.ecl-content-item__image__after': 0
- equals:
- 'article.ecl-content-item div.ecl-content-item__meta': "Meta 1"
- 'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title"
- 'article.ecl-content-item div.ecl-content-item__description': "Item..."
-- array:
- '#type': pattern
- '#id': list_item
- '#fields':
- url: "http://example.com"
- title: "Item title"
- additional_information:
- - '#type': pattern
- '#id': field_list
- '#variant': horizontal
- '#fields':
- items:
- - label: "When"
- body: "Thursday 15 November, 08:00 AM to Friday 16 November"
- - label: "Where"
- body: "The EGG, Rue Barra 175, 1070 Brussels, Belgium"
- assertions:
- count:
- 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
- 'article.ecl-content-item div[role="img"].ecl-u-d-l-block': 0
- 'article.ecl-content-item div.ecl-content-item__image__before': 0
- 'article.ecl-content-item div.ecl-content-item__image__after': 0
- 'div.ecl-content-item__additional_information .ecl-description-list.ecl-description-list--horizontal': 1
- 'div.ecl-content-item__additional_information .ecl-description-list__term': 2
- 'div.ecl-content-item__additional_information .ecl-description-list__definition': 2
- 'svg.ecl-icon.ecl-icon--s.ecl-link__icon': 0
- equals:
- 'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title"
- 'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__term:nth-child(1)': "When"
- 'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__definition:nth-child(2)': "Thursday 15 November, 08:00 AM to Friday 16 November"
- 'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__term:nth-child(3)': "Where"
- 'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__definition:nth-child(4)': "The EGG, Rue Barra 175, 1070 Brussels, Belgium"
-- array:
- '#type': pattern
- '#id': list_item
- '#fields':
- url: "http://example.com"
- title: "Item title"
- detail:
- '#markup': 'This is the detail. It is long.
'
- length: 24
- meta:
- - "Meta 1"
- - "Meta 2"
- icon: "check"
- assertions:
- count:
- 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
- 'article.ecl-content-item div[role="img"].ecl-u-d-l-block': 0
- 'article.ecl-content-item div.ecl-content-item__image__before': 0
- 'article.ecl-content-item div.ecl-content-item__image__after': 0
- equals:
- 'a.ecl-link.ecl-link--standalone.ecl-link--icon.ecl-link--icon-after svg.ecl-icon.ecl-icon--s.ecl-link__icon' : ''
- 'article.ecl-content-item div.ecl-content-item__meta': "Meta 1 | Meta 2"
- 'article.ecl-content-item div.ecl-content-item__title .ecl-link span.ecl-link__label': "Item title"
- 'article.ecl-content-item div.ecl-content-item__description': "This is the detail. It...
"
-- array:
- '#type': pattern
- '#id': list_item
- '#fields':
- url: "http://example.com"
- title: "Item title"
- detail:
- '#markup': 'This
is the detail with a link. It is long. So it should count properly only the words.
This is the detail. It is long.
'
- length: 24
- meta:
- - "Meta 1"
- - "Meta 2"
- assertions:
- count:
- 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
- 'article.ecl-content-item div[role="img"].ecl-u-d-l-block': 0
- 'article.ecl-content-item div.ecl-content-item__image__before': 0
- 'article.ecl-content-item div.ecl-content-item__image__after': 0
- equals:
- 'article.ecl-content-item div.ecl-content-item__meta': "Meta 1 | Meta 2"
- 'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title"
- 'article.ecl-content-item div.ecl-content-item__description': '<div>This is the detail...'
-- array:
- '#type': pattern
- '#id': list_item
- '#fields':
- url: "http://example.com"
- title: "Item title"
- detail:
- '#type': 'processed_text'
- '#text': 'This is the detail. It is long.
'
- '#format': 'plain_text'
- length: 24
- meta:
- - "Meta 1"
- - "Meta 2"
- assertions:
- count:
- 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
- 'article.ecl-content-item div[role="img"].ecl-u-d-l-block': 0
- 'article.ecl-content-item div.ecl-content-item__image__before': 0
- 'article.ecl-content-item div.ecl-content-item__image__after': 0
- equals:
- 'article.ecl-content-item div.ecl-content-item__meta': "Meta 1 | Meta 2"
- 'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title"
- 'article.ecl-content-item div.ecl-content-item__description': '<div>This is the detail...
'
-- array:
- '#type': pattern
- '#id': list_item
- '#fields':
- url: "http://example.com"
- title: "Item title"
- detail:
- '#type': 'processed_text'
- '#text': 'This is the detail. It is long.
'
- '#format': 'plain_text'
- length: 24
- meta:
- - "Meta 1"
- - "Meta 2"
- assertions:
- count:
- 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
- 'article.ecl-content-item div[role="img"].ecl-u-d-l-block': 0
- 'article.ecl-content-item div.ecl-content-item__image__before': 0
- 'article.ecl-content-item div.ecl-content-item__image__after': 0
- 'article > div .ecl-description-list': 0
- equals:
- 'article.ecl-content-item div.ecl-content-item__meta': "Meta 1 | Meta 2"
- 'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title"
- 'article.ecl-content-item div.ecl-content-item__description': '<div>This is the detail...
'
-- array:
- '#type': pattern
- '#id': list_item
- '#fields':
- detail: "This is a very long description. Better to trim it off."
- length: 32
- assertions:
- equals:
- 'article.ecl-content-item div.ecl-content-item__description': "This is a very long description..."
-- array:
- '#type': pattern
- '#id': list_item
- '#variant': "thumbnail_primary"
- '#fields':
- detail: "This is a very long description. Better to trim it off."
- length: 32
- assertions:
- equals:
- 'article.ecl-content-item div.ecl-content-item__description': "This is a very long description..."
-- array:
- '#type': pattern
- '#id': list_item
- '#variant': "thumbnail_secondary"
- '#fields':
- detail: "This is a very long description. Better to trim it off."
- length: 32
- assertions:
- equals:
- 'article.ecl-content-item div.ecl-content-item__description': "This is a very long description..."
-- array:
- '#type': pattern
- '#id': list_item
- '#variant': "navigation"
- '#fields':
- detail: "This is a very long description. Better to trim it off."
- length: 32
- assertions:
- equals:
- 'article.ecl-content-item div.ecl-content-item__description': "This is a very long description..."
-- array:
- '#type': pattern
- '#id': list_item
- '#variant': "thumbnail_primary"
- '#fields':
- title: "Item title"
- url: "http://example.com"
- detail: "Item text"
- image:
- src: "http://via.placeholder.com/150x150"
- alt: "Alternate text for primary image"
- meta:
- - "Meta 1"
- - "Meta 2"
- assertions:
- count:
- 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
- 'article.ecl-content-item div[aria-label="Alternate text for primary image"].ecl-u-d-l-block': 1
- 'article.ecl-content-item div.ecl-content-item__image__before': 1
- 'article.ecl-content-item div.ecl-content-item__image__after': 0
- equals:
- 'article.ecl-content-item div.ecl-content-item__meta': "Meta 1 | Meta 2"
- 'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title"
- 'article.ecl-content-item div.ecl-content-item__description': "Item text"
-- array:
- '#type': pattern
- '#id': list_item
- '#variant': "thumbnail_secondary"
- '#fields':
- title: "Item title"
- url: "http://example.com"
- detail: "Item text"
- image:
- src: "http://via.placeholder.com/120x80"
- alt: "Alternate text for secondary image"
- meta:
- - "Meta 1"
- - "Meta 2"
- assertions:
- count:
- 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
- 'article.ecl-content-item div[aria-label="Alternate text for secondary image"].ecl-u-d-l-block': 1
- 'article.ecl-content-item div.ecl-content-item__image__before': 0
- 'article.ecl-content-item div.ecl-content-item__image__after': 1
- equals:
- 'article.ecl-content-item div.ecl-content-item__meta': "Meta 1 | Meta 2"
- 'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title"
- 'article.ecl-content-item div.ecl-content-item__description': "Item text"
-- array:
- '#type': pattern
- '#id': list_item
- '#variant': "highlight"
- '#fields':
- title: "Item title"
- url: "http://example.com"
- image:
- src: "http://via.placeholder.com/300x300"
- alt: "Alternate text for secondary image"
- assertions:
- count:
- article.ecl-card div.ecl-card__body h1.ecl-card__title a.ecl-link--standalone[href="http://example.com"]: 1
- article.ecl-card div.ecl-card__image[aria-label="Alternate text for secondary image"]: 1
- article.ecl-card div.ecl-card__image[style="background-image:url('http://via.placeholder.com/300x300')"]: 1
- article.ecl-card div.ecl-card__body div.ecl-card__meta: 0
- article.ecl-card div.ecl-card__body div.ecl-card__description: 0
- equals:
- article.ecl-card div.ecl-card__body h1.ecl-card__title .ecl-link: "Item title"
-- array:
- '#type': pattern
- '#id': list_item
- '#variant': "highlight"
- '#fields':
- title: "Item title"
- url: "http://example.com"
- image:
- src: "http://via.placeholder.com/300x300"
- alt: "Alternate text for secondary image"
- detail: "This is a very long description. Better to trim it off."
- length: 32
- assertions:
- count:
- article.ecl-card div.ecl-card__body h1.ecl-card__title a.ecl-link--standalone[href="http://example.com"]: 1
- article.ecl-card div.ecl-card__image[aria-label="Alternate text for secondary image"]: 1
- article.ecl-card div.ecl-card__image[style="background-image:url('http://via.placeholder.com/300x300')"]: 1
- article.ecl-card div.ecl-card__body div.ecl-card__meta: 0
- article.ecl-card div.ecl-card__body div.ecl-card__description: 1
- equals:
- article.ecl-card div.ecl-card__body h1.ecl-card__title .ecl-link: "Item title"
- article.ecl-card div.ecl-card__body div.ecl-card__description: "This is a very long description..."
-- array:
- '#type': pattern
- '#id': list_item
- '#variant': "block"
- '#fields':
- title: "Item title"
- url: "http://example.com"
- detail: "Item test"
- assertions:
- count:
- 'article.ecl-card div.ecl-card__body h1.ecl-card__title a.ecl-link--standalone[href="http://example.com"]': 1
- 'article.ecl-card div.ecl-card__image': 0
- 'article.ecl-card div.ecl-card__body div.ecl-card__meta': 0
- equals:
- 'article.ecl-card div.ecl-card__body h1.ecl-card__title .ecl-link': "Item title"
- 'article.ecl-card div.ecl-card__body div.ecl-card__description': "Item test"
-- array:
- '#type': pattern
- '#id': list_item
- '#variant': "date"
- '#fields':
- title: "Item title"
- url: "http://example.com"
- detail: "Item text"
- date:
- day: '14'
- month_fullname: 'July'
- month_name: 'Jul'
- month: '7'
- year: '2021'
- meta:
- - "News article"
- - "6 July 2015"
- assertions:
- count:
- 'article.ecl-content-item-date div.ecl-content-item-date__title a.ecl-link[href="http://example.com"]': 1
- 'article.ecl-content-item-date div.ecl-content-item-date__date': 1
- 'article.ecl-content-item-date div.ecl-content-item-date__date abbr.ecl-date-block__month[title="July"]': 1
- equals:
- 'article.ecl-content-item-date div.ecl-content-item-date__meta': "News article | 6 July 2015"
- 'article.ecl-content-item-date div.ecl-content-item-date__title .ecl-link': "Item title"
- 'article.ecl-content-item-date div.ecl-content-item-date__description': "Item text"
- 'article.ecl-content-item-date div.ecl-content-item-date__date span.ecl-date-block__day': '14'
- 'article.ecl-content-item-date div.ecl-content-item-date__date abbr.ecl-date-block__month': 'Jul'
- 'article.ecl-content-item-date div.ecl-content-item-date__date span.ecl-date-block__year': '2021'
-- array:
- '#type': pattern
- '#id': list_item
- '#variant': "date"
- '#fields':
- title: "Item title"
- url: "http://example.com"
- detail: "Item text"
- date:
- day: '14'
- month_fullname: 'July'
- month_name: 'Jul'
- month: '7'
- year: '2021'
- meta:
- - "News article"
- - "6 July 2015"
- additional_information:
- - '#type': pattern
- '#id': field_list
- '#variant': horizontal
- '#fields':
- items:
- - label: "When"
- body: "Thursday 15 November, 08:00 AM to Friday 16 November"
- - label: "Where"
- body: "The EGG, Rue Barra 175, 1070 Brussels, Belgium"
- assertions:
- count:
- 'article.ecl-content-item-date div.ecl-content-item-date__title a.ecl-link[href="http://example.com"]': 1
- 'article.ecl-content-item-date div.ecl-content-item-date__date': 1
- 'article.ecl-content-item-date div.ecl-content-item-date__date abbr.ecl-date-block__month[title="July"]': 1
- 'div.ecl-content-item__additional_information .ecl-description-list.ecl-description-list--horizontal': 1
- 'div.ecl-content-item__additional_information .ecl-description-list__term': 2
- 'div.ecl-content-item__additional_information .ecl-description-list__definition': 2
- equals:
- 'article.ecl-content-item-date div.ecl-content-item-date__meta': "News article | 6 July 2015"
- 'article.ecl-content-item-date div.ecl-content-item-date__title .ecl-link': "Item title"
- 'article.ecl-content-item-date div.ecl-content-item-date__description': "Item text"
- 'article.ecl-content-item-date div.ecl-content-item-date__date span.ecl-date-block__day': '14'
- 'article.ecl-content-item-date div.ecl-content-item-date__date abbr.ecl-date-block__month': 'Jul'
- 'article.ecl-content-item-date div.ecl-content-item-date__date span.ecl-date-block__year': '2021'
- 'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__term:nth-child(1)': "When"
- 'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__definition:nth-child(2)': "Thursday 15 November, 08:00 AM to Friday 16 November"
- 'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__term:nth-child(3)': "Where"
- 'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__definition:nth-child(4)': "The EGG, Rue Barra 175, 1070 Brussels, Belgium"
-- array:
- '#type': pattern
- '#id': list_item
- '#variant': "date_cancelled"
- '#fields':
- date:
- day: '14'
- month_fullname: 'July'
- month_name: 'Jul'
- month: '7'
- year: '2021'
- assertions:
- count:
- 'time.ecl-date-block.ecl-date-block--canceled': 1
-- array:
- '#type': pattern
- '#id': list_item
- '#variant': "date_ongoing"
- '#fields':
- date:
- day: '14'
- month_fullname: 'July'
- month_name: 'Jul'
- month: '7'
- year: '2021'
- assertions:
- count:
- 'time.ecl-date-block.ecl-date-block--ongoing': 1
-- array:
- '#type': pattern
- '#id': list_item
- '#variant': "date_past"
- '#fields':
- date:
- day: '14'
- month_fullname: 'July'
- month_name: 'Jul'
- month: '7'
- year: '2021'
- assertions:
- count:
- 'time.ecl-date-block.ecl-date-block--past': 1
-- array:
- '#type': pattern
- '#id': list_item
- '#variant': "navigation"
- '#fields':
- title: "Item title"
- url: "http://example.com"
- detail: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
- assertions:
- count:
- 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
- 'article.ecl-content-item div[role="img"].ecl-u-d-l-block': 0
- 'article.ecl-content-item div.ecl-content-item__image__before': 0
- 'article.ecl-content-item div.ecl-content-item__image__after': 0
- equals:
- 'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title"
- 'article.ecl-content-item div.ecl-content-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
-- array:
- '#type': pattern
- '#id': list_item_block_one_column
- '#fields':
- title: "Block title"
- items:
- - '#type': "pattern"
- '#id': "list_item"
- '#fields':
- title: "Business, Economy, Euro"
- detail: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
- button_label: "View all"
- button_url: "http://example.com"
- assertions:
- count:
- 'div.ecl-content-item-block__title': 1
- 'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': 1
- 'div.ecl-content-item-block__item': 1
- 'div.ecl-content-item-block__item.ecl-col-12': 1
- 'div.ecl-content-item-block__item.ecl-col-m-6': 0
- 'div.ecl-content-item-block__item.ecl-col-m-4': 0
- 'div.ecl-content-item-block__item.ecl-col-12 article.ecl-content-item': 1
- 'div.ecl-content-item-block__item.ecl-col-m-6 article.ecl-content-item': 0
- 'div.ecl-content-item-block__item.ecl-col-m-4 article.ecl-content-item': 0
- '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-icon': 0
- 'div.ecl-content-item-block__button a.ecl-link--standalone svg': 0
- equals:
- 'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': "Block title"
- 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "Business, Economy, Euro"
- 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
- 'a.ecl-link': "View all"
-- array:
- '#type': pattern
- '#id': list_item_block_one_column
- '#fields':
- items:
- - '#type': "pattern"
- '#id': "list_item"
- '#fields':
- title: "Business, Economy, Euro"
- detail: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
- button_label: "View all"
- button_url: "http://example.com"
- 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': 1
- 'div.ecl-content-item-block__item.ecl-col-12': 1
- 'div.ecl-content-item-block__item.ecl-col-m-6': 0
- 'div.ecl-content-item-block__item.ecl-col-m-4': 0
- 'div.ecl-content-item-block__item.ecl-col-12 article.ecl-content-item': 1
- 'div.ecl-content-item-block__item.ecl-col-m-6 article.ecl-content-item': 0
- 'div.ecl-content-item-block__item.ecl-col-m-4 article.ecl-content-item': 0
- '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': 0
- equals:
- 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "Business, Economy, Euro"
- 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
- 'a.ecl-link': "View all"
-- array:
- '#type': pattern
- '#id': list_item_block_one_column
- '#fields':
- title: "Block title"
- items:
- - '#type': "pattern"
- '#id': "list_item"
- '#fields':
- title: "Business, Economy, Euro"
- detail: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
- assertions:
- count:
- 'div.ecl-content-item-block__title': 1
- 'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': 1
- 'div.ecl-content-item-block__item': 1
- 'div.ecl-content-item-block__item.ecl-col-12': 1
- 'div.ecl-content-item-block__item.ecl-col-m-6': 0
- 'div.ecl-content-item-block__item.ecl-col-m-4': 0
- 'div.ecl-content-item-block__item.ecl-col-12 article.ecl-content-item': 1
- 'div.ecl-content-item-block__item.ecl-col-m-6 article.ecl-content-item': 0
- '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
- equals:
- 'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': "Block title"
- 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "Business, Economy, Euro"
- 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
-- array:
- '#type': pattern
- '#id': list_item_block_one_column
- '#fields':
- items:
- - '#type': "pattern"
- '#id': "list_item"
- '#fields':
- title: "Business, Economy, Euro"
- detail: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
- 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': 1
- 'div.ecl-content-item-block__item.ecl-col-12': 1
- 'div.ecl-content-item-block__item.ecl-col-m-6': 0
- 'div.ecl-content-item-block__item.ecl-col-m-4': 0
- 'div.ecl-content-item-block__item.ecl-col-12 article.ecl-content-item': 1
- 'div.ecl-content-item-block__item.ecl-col-m-6 article.ecl-content-item': 0
- '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
- equals:
- 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "Business, Economy, Euro"
- 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
-- array:
- '#type': pattern
- '#id': list_item_block_one_column
- '#fields':
- title: "Block title"
- items:
- - '#type': "pattern"
- '#id': "list_item"
- '#fields':
- title: "Business, Economy, Euro"
- detail: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
- button_label: "View all"
- button_url: "http://example.com"
- button_icon_name: "list"
- assertions:
- count:
- 'div.ecl-content-item-block__title': 1
- 'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': 1
- 'div.ecl-content-item-block__item': 1
- 'div.ecl-content-item-block__item.ecl-col-12': 1
- 'div.ecl-content-item-block__item.ecl-col-m-6': 0
- 'div.ecl-content-item-block__item.ecl-col-m-4': 0
- 'div.ecl-content-item-block__item.ecl-col-12 article.ecl-content-item': 1
- 'div.ecl-content-item-block__item.ecl-col-m-6 article.ecl-content-item': 0
- 'div.ecl-content-item-block__item.ecl-col-m-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.ecl-link--icon-after[href="http://example.com"]': 1
- equals:
- 'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': "Block title"
- 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "Business, Economy, Euro"
- 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
- 'a.ecl-link': 'View all'
-- array:
- '#type': pattern
- '#id': list_item_block_one_column
- '#fields':
- title: "Block title"
- items:
- - '#type': "pattern"
- '#id': "list_item"
- '#fields':
- title: "Business, Economy, Euro"
- detail: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
- button_label: "View all"
- button_url: "http://example.com"
- button_icon_name: "list"
- button_icon_position: "before"
- assertions:
- count:
- 'div.ecl-content-item-block__title': 1
- 'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': 1
- 'div.ecl-content-item-block__item': 1
- 'div.ecl-content-item-block__item.ecl-col-12': 1
- 'div.ecl-content-item-block__item.ecl-col-m-6': 0
- 'div.ecl-content-item-block__item.ecl-col-m-4': 0
- 'div.ecl-content-item-block__item.ecl-col-12 article.ecl-content-item': 1
- 'div.ecl-content-item-block__item.ecl-col-m-6 article.ecl-content-item': 0
- 'div.ecl-content-item-block__item.ecl-col-m-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.ecl-link--icon-before[href="http://example.com"]': 1
- equals:
- 'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': "Block title"
- 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "Business, Economy, Euro"
- 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
- 'a.ecl-link': 'View all'
-- array:
- '#type': pattern
- '#id': list_item_block_two_columns
- '#fields':
- items:
- - '#type': "pattern"
- '#id': "list_item"
- '#fields':
- title: "List item 1"
- detail: "Description for list item 1."
- - '#type': "pattern"
- '#id': "list_item"
- '#fields':
- title: "List item 2"
- detail: "Description for list item 2."
- 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': 2
- 'div.ecl-content-item-block__item.ecl-col-l-6': 2
- 'div.ecl-content-item-block__item.ecl-col-l-4': 0
- 'div.ecl-content-item-block__item.ecl-col-l-6 article.ecl-content-item': 2
- '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
- 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."
-- array:
- '#type': pattern
- '#id': list_item_block_two_columns
- '#fields':
- items:
- - '#type': "pattern"
- '#id': "list_item"
- '#fields':
- title: "List item 1"
- detail: "Description for list item 1."
- - '#type': "pattern"
- '#id': "list_item"
- '#fields':
- title: "List item 2"
- detail: "Description for list item 2."
- button_label: "View all"
- button_url: "http://example.com"
- button_icon_name: "list"
- button_icon_position: "before"
- 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': 2
- 'div.ecl-content-item-block__item.ecl-col-l-6': 2
- 'div.ecl-content-item-block__item.ecl-col-l-4': 0
- 'div.ecl-content-item-block__item.ecl-col-l-6 article.ecl-content-item': 2
- '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.ecl-link--icon-before[href="http://example.com"]': 1
- 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."
- 'a.ecl-link': 'View all'
-- array:
- '#type': pattern
- '#id': list_item_block_three_columns
- '#fields':
- items:
- - '#type': "pattern"
- '#id': "list_item"
- '#fields':
- title: "List item 1"
- detail: "Description for list item 1."
- - '#type': "pattern"
- '#id': "list_item"
- '#fields':
- title: "List item 2"
- detail: "Description for list item 2."
- - '#type': "pattern"
- '#id': "list_item"
- '#fields':
- title: "List item 3"
- detail: "Description for list item 3."
- 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.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-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__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."
-- array:
- '#type': pattern
- '#id': list_item_block_three_columns
- '#fields':
- items:
- - '#type': "pattern"
- '#id': "list_item"
- '#fields':
- title: "List item 1"
- detail: "Description for list item 1."
- - '#type': "pattern"
- '#id': "list_item"
- '#fields':
- title: "List item 2"
- detail: "Description for list item 2."
- - '#type': "pattern"
- '#id': "list_item"
- '#fields':
- title: "List item 3"
- detail: "Description for list item 3."
- button_label: "View all"
- button_url: "http://example.com"
- button_icon_name: "language"
- button_icon_position: "after"
- 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.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-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__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:
- '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."
- 'a.ecl-link': 'View all'
-- array:
- '#type': pattern
- '#id': list_item_block_four_columns
- '#fields':
- items:
- - { '#type': 'pattern', '#id': 'link', '#fields': { url: '#', text: 'A simple link 1' } }
- - { '#type': 'pattern', '#id': 'link', '#fields': { url: '#', text: 'A simple link 2' } }
- - { '#type': 'pattern', '#id': 'link', '#fields': { url: '#', text: 'A simple link 3' } }
- - { '#type': 'pattern', '#id': 'link', '#fields': { url: '#', text: 'A simple link 4' } }
- button_label: "View all"
- button_url: "http://example.com"
- button_icon_name: "list"
- button_icon_position: "before"
- assertions:
- equals:
- 'div.ecl-content-item-block__item.ecl-col-l-3:nth-child(1) a.ecl-link': 'A simple link 1'
- 'div.ecl-content-item-block__item.ecl-col-l-3:nth-child(2) a.ecl-link': 'A simple link 2'
- 'div.ecl-content-item-block__item.ecl-col-l-3:nth-child(3) a.ecl-link': 'A simple link 3'
- 'div.ecl-content-item-block__item.ecl-col-l-3:nth-child(4) a.ecl-link': 'A simple link 4'
- 'a.ecl-link--icon-before': 'View all'
-- array:
- '#type': pattern
- '#id': list_item_block_six_columns
- '#fields':
- items:
- - { '#type': 'pattern', '#id': 'link', '#fields': { url: '#', text: 'A simple link 1' } }
- - { '#type': 'pattern', '#id': 'link', '#fields': { url: '#', text: 'A simple link 2' } }
- - { '#type': 'pattern', '#id': 'link', '#fields': { url: '#', text: 'A simple link 3' } }
- - { '#type': 'pattern', '#id': 'link', '#fields': { url: '#', text: 'A simple link 4' } }
- - { '#type': 'pattern', '#id': 'link', '#fields': { url: '#', text: 'A simple link 5' } }
- - { '#type': 'pattern', '#id': 'link', '#fields': { url: '#', text: 'A simple link 6' } }
- button_label: "View all"
- button_url: "http://example.com"
- button_icon_name: "list"
- button_icon_position: "before"
- assertions:
- equals:
- 'div.ecl-content-item-block__item.ecl-col-l-2:nth-child(1) a.ecl-link': 'A simple link 1'
- 'div.ecl-content-item-block__item.ecl-col-l-2:nth-child(2) a.ecl-link': 'A simple link 2'
- 'div.ecl-content-item-block__item.ecl-col-l-2:nth-child(3) a.ecl-link': 'A simple link 3'
- 'div.ecl-content-item-block__item.ecl-col-l-2:nth-child(4) a.ecl-link': 'A simple link 4'
- 'div.ecl-content-item-block__item.ecl-col-l-2:nth-child(5) a.ecl-link': 'A simple link 5'
- 'div.ecl-content-item-block__item.ecl-col-l-2:nth-child(6) a.ecl-link': 'A simple link 6'
- 'a.ecl-link--icon-before': 'View all'
-- array:
- '#type': pattern
- '#id': navigation_list
- '#fields':
- title: 'Navigation list title'
- title_url: 'http://example.com'
- description: 'Navigation list description'
- links:
- - label: 'Child 1'
- url: 'http://example.com/child1'
- - label: 'Child 2'
- url: 'http://example.com/child2'
- - label: 'Child 3'
- url: 'http://example.com/child3'
- secondary_links:
- - label: 'Secondary Link 1'
- url: 'http://example.com/secondary1'
- - label: 'Secondary Link 2'
- url: 'http://example.com/secondary2'
- assertions:
- equals:
- 'h2.ecl-u-ma-none.ecl-u-type-prolonged-xl.ecl-u-type-bold a.ecl-link--standalone.ecl-link[href="http://example.com"]': 'Navigation list title'
- 'p.ecl-u-mb-none.ecl-u-mt-m.ecl-u-type-color-grey.ecl-u-type-paragraph': 'Navigation list description'
- 'li.ecl-unordered-list__item:nth-child(1) a.ecl-link[href="http://example.com/child1"]': 'Child 1'
- 'li.ecl-unordered-list__item:nth-child(2) a.ecl-link[href="http://example.com/child2"]': 'Child 2'
- 'li.ecl-unordered-list__item:nth-child(3) a.ecl-link[href="http://example.com/child3"]': 'Child 3'
- 'div.ecl-u-border-top li.ecl-unordered-list__item:nth-child(1) a.ecl-link[href="http://example.com/secondary1"]': 'Secondary Link 1'
- 'div.ecl-u-border-top li.ecl-unordered-list__item:nth-child(2) a.ecl-link[href="http://example.com/secondary2"]': 'Secondary Link 2'
- count:
- ul.ecl-u-mt-m.ecl-unordered-list.ecl-unordered-list--no-bullet: 2
- li.ecl-unordered-list__item: 5
-- array:
- '#type': pattern
- '#id': navigation_list
- '#fields':
- title: 'Navigation list title'
- title_url: 'http://example.com'
- description: 'Navigation list description'
- assertions:
- equals:
- 'h2.ecl-u-ma-none.ecl-u-type-prolonged-xl.ecl-u-type-bold a.ecl-link--standalone.ecl-link[href="http://example.com"]': 'Navigation list title'
- 'p.ecl-u-mb-none.ecl-u-mt-m.ecl-u-type-color-grey.ecl-u-type-paragraph': 'Navigation list description'
- count:
- ul.ecl-u-mt-m.ecl-unordered-list.ecl-unordered-list--no-bullet: 0
- li.ecl-unordered-list__item: 0
- div.ecl-u-border-top: 0
-- array:
- '#type': pattern
- '#id': navigation_list
- '#fields':
- title: 'Navigation list title'
- title_url: 'http://example.com'
- links:
- - label: 'Child 1'
- url: 'http://example.com/child1'
- - label: 'Child 2'
- url: 'http://example.com/child2'
- - label: 'Child 3'
- url: 'http://example.com/child3'
- assertions:
- equals:
- 'h2.ecl-u-ma-none.ecl-u-type-prolonged-xl.ecl-u-type-bold a.ecl-link--standalone.ecl-link[href="http://example.com"]': 'Navigation list title'
- 'li.ecl-unordered-list__item:nth-child(1) a.ecl-link[href="http://example.com/child1"]': 'Child 1'
- 'li.ecl-unordered-list__item:nth-child(2) a.ecl-link[href="http://example.com/child2"]': 'Child 2'
- 'li.ecl-unordered-list__item:nth-child(3) a.ecl-link[href="http://example.com/child3"]': 'Child 3'
- count:
- ul.ecl-u-mt-m.ecl-unordered-list.ecl-unordered-list--no-bullet: 1
- li.ecl-unordered-list__item: 3
- 'p.ecl-u-mb-none.ecl-u-mt-m.ecl-u-type-color-grey.ecl-u-type-paragraph': 0
- div.ecl-u-border-top: 0
-- array:
- '#type': pattern
- '#id': accordion
- '#fields':
- identifier: "id"
- items:
- - title: "Title 1"
- body: "Body 1"
- - title: "Title 2"
- body: "Body 2"
- assertions:
- count:
- '.ecl-accordion__title': 2
- '.ecl-accordion__title button.ecl-accordion__toggle .ecl-accordion__toggle-icon': 2
- '.ecl-accordion__title button.ecl-accordion__toggle .ecl-accordion__toggle-title': 2
- '.ecl-accordion__content#id-0-content': 1
- '.ecl-accordion__content#id-1-content': 1
- equals:
- '.ecl-accordion__title button.ecl-accordion__toggle[aria-controls="id-0-content"] .ecl-accordion__toggle-title': "Title 1"
- '.ecl-accordion__content#id-0-content': "Body 1"
- '.ecl-accordion__title button.ecl-accordion__toggle[aria-controls="id-1-content"] .ecl-accordion__toggle-title': "Title 2"
- '.ecl-accordion__content#id-1-content': "Body 2"
-- array:
- '#type': pattern
- '#id': dropdown
- '#fields':
- button_label: "Dropdown"
- links:
- - label: 'Link 1'
- url: 'http://example.com/1'
- - label: 'Link 2'
- url: 'http://example.com/2'
- - label: 'Link 3'
- url: 'http://example.com/3'
- assertions:
- count:
- '.ecl-expandable-dropdown__content a[href="http://example.com/1"]': 1
- '.ecl-expandable-dropdown__content a[href="http://example.com/2"]': 1
- '.ecl-expandable-dropdown__content a[href="http://example.com/3"]': 1
- equals:
- 'button.ecl-expandable__toggle span.ecl-button__label': "Dropdown"
- '.ecl-expandable-dropdown__content .ecl-unordered-list .ecl-unordered-list__item:nth-child(1) a': "Link 1"
- '.ecl-expandable-dropdown__content .ecl-unordered-list .ecl-unordered-list__item:nth-child(2) a': "Link 2"
- '.ecl-expandable-dropdown__content .ecl-unordered-list .ecl-unordered-list__item:nth-child(3) a': "Link 3"
-- array:
- '#type': pattern
- '#id': field
- '#variant': default
- '#fields':
- label: "Field text"
- body: "Field body"
- assertions:
- count:
- '.ecl-description-list.ecl-description-list--default': 1
- '.ecl-description-list__term': 1
- '.ecl-description-list__definition': 1
- equals:
- '.ecl-description-list__term': "Field text"
- '.ecl-description-list__definition': "Field body"
-- array:
- '#type': pattern
- '#id': field
- '#variant': horizontal
- '#fields':
- label: "Field label"
- body: "Field body"
- assertions:
- count:
- '.ecl-description-list.ecl-description-list--horizontal': 1
- '.ecl-description-list__term': 1
- '.ecl-description-list__definition': 1
- equals:
- '.ecl-description-list__term': "Field label"
- '.ecl-description-list__definition': "Field body"
-- array:
- '#type': pattern
- '#id': field_list
- '#variant': horizontal
- '#fields':
- items:
- - label: "When"
- body: "Thursday 15 November, 08:00 AM to Friday 16 November"
- - label: "Where"
- body: "The EGG, Rue Barra 175, 1070 Brussels, Belgium"
- - label: "Live streaming"
- body: "08:00 CET | 00d:23h:35m"
- assertions:
- count:
- '.ecl-description-list.ecl-description-list--horizontal': 1
- '.ecl-description-list__term': 3
- '.ecl-description-list__definition': 3
- equals:
- '.ecl-description-list .ecl-description-list__term:nth-child(1)': "When"
- '.ecl-description-list .ecl-description-list__definition:nth-child(2)': "Thursday 15 November, 08:00 AM to Friday 16 November"
- '.ecl-description-list .ecl-description-list__term:nth-child(3)': "Where"
- '.ecl-description-list .ecl-description-list__definition:nth-child(4)': "The EGG, Rue Barra 175, 1070 Brussels, Belgium"
- '.ecl-description-list .ecl-description-list__term:nth-child(5)': "Live streaming"
- '.ecl-description-list .ecl-description-list__definition:nth-child(6)': "08:00 CET | 00d:23h:35m"
-- array:
- '#type': pattern
- '#variant': default
- '#id': field_list
- '#fields':
- items:
- - label: "When"
- body: "Thursday 15 November, 08:00 AM to Friday 16 November"
- - label: "Where"
- body: "The EGG, Rue Barra 175, 1070 Brussels, Belgium"
- - label: "Live streaming"
- body: "08:00 CET | 00d:23h:35m"
- assertions:
- count:
- '.ecl-description-list.ecl-description-list--default': 1
- '.ecl-description-list__term': 3
- '.ecl-description-list__definition': 3
- equals:
- '.ecl-description-list .ecl-description-list__term:nth-child(1)': "When"
- '.ecl-description-list .ecl-description-list__definition:nth-child(2)': "Thursday 15 November, 08:00 AM to Friday 16 November"
- '.ecl-description-list .ecl-description-list__term:nth-child(3)': "Where"
- '.ecl-description-list .ecl-description-list__definition:nth-child(4)': "The EGG, Rue Barra 175, 1070 Brussels, Belgium"
- '.ecl-description-list .ecl-description-list__term:nth-child(5)': "Live streaming"
- '.ecl-description-list .ecl-description-list__definition:nth-child(6)': "08:00 CET | 00d:23h:35m"
-- array:
- '#type': pattern
- '#id': link_block
- '#fields':
- title: "Link block title"
- links:
- - label: 'Link 1'
- url: 'http://link-1.com'
- - label: 'Link 2'
- url: 'http://link-2.com'
- - label: 'Link 3'
- url: 'http://link-3.com'
- assertions:
- count:
- '.ecl-link-block__title': 1
- '.ecl-link-block__item': 3
- 'a.ecl-link-block__link[href="http://link-1.com"]': 1
- 'a.ecl-link-block__link[href="http://link-2.com"]': 1
- 'a.ecl-link-block__link[href="http://link-3.com"]': 1
- equals:
- '.ecl-link-block__title h5': "Link block title"
- '.ecl-link-block__list .ecl-link-block__item:nth-child(1) .ecl-link': "Link 1"
- '.ecl-link-block__list .ecl-link-block__item:nth-child(2) .ecl-link': "Link 2"
- '.ecl-link-block__list .ecl-link-block__item:nth-child(3) .ecl-link': "Link 3"
-- array:
- '#type': pattern
- '#id': link_block
- '#fields':
- links:
- - label: 'Link 1'
- url: 'http://link-1.com'
- - label: 'Link 2'
- url: 'http://link-2.com'
- - label: 'Link 3'
- url: 'http://link-3.com'
- assertions:
- count:
- '.ecl-link-block__title': 0
- '.ecl-link-block__item': 3
- 'a.ecl-link-block__link[href="http://link-1.com"]': 1
- 'a.ecl-link-block__link[href="http://link-2.com"]': 1
- 'a.ecl-link-block__link[href="http://link-3.com"]': 1
- equals:
- '.ecl-link-block__list .ecl-link-block__item:nth-child(1) .ecl-link': "Link 1"
- '.ecl-link-block__list .ecl-link-block__item:nth-child(2) .ecl-link': "Link 2"
- '.ecl-link-block__list .ecl-link-block__item:nth-child(3) .ecl-link': "Link 3"
-- array:
- '#type': pattern
- '#id': blockquote
- '#fields':
- body: "Quote text"
- author: "Quote author"
- assertions:
- equals:
- '.ecl-blockquote__author': "Quote author"
- '.ecl-blockquote__citation': "Quote text"
-- array:
- '#type': pattern
- '#id': context_nav
- '#fields':
- label: "Navigation title"
- items:
- - href: "http://link-1.com"
- label: "Item one"
- - href: "http://link-2.com"
- label: "Item two"
- - href: "http://link-3.com"
- label: "Item three"
- - href: "http://link-4.com"
- label: "Item four"
- - href: "http://link-5.com"
- label: "Item five"
- limit: 4
- more_label: "More label"
- assertions:
- count:
- 'li.ecl-contextual-navigation__item': 6
- 'li.ecl-contextual-navigation__item--collapsed': 1
- 'li.ecl-contextual-navigation__item--more': 1
- equals:
- 'li.ecl-contextual-navigation__item a.ecl-contextual-navigation__link[href="http://link-1.com"]': "Item one"
- 'li.ecl-contextual-navigation__item a.ecl-contextual-navigation__link[href="http://link-2.com"]': "Item two"
- 'li.ecl-contextual-navigation__item a.ecl-contextual-navigation__link[href="http://link-3.com"]': "Item three"
- 'li.ecl-contextual-navigation__item a.ecl-contextual-navigation__link[href="http://link-4.com"]': "Item four"
- 'li.ecl-contextual-navigation__item a.ecl-contextual-navigation__link[href="http://link-5.com"]': "Item five"
- 'div.ecl-contextual-navigation__label': "Navigation title"
- 'button.ecl-contextual-navigation__more .ecl-button__label': "More label"
-- array:
- '#type': pattern
- '#id': button
- '#variant': default
- '#fields':
- label: "Button label"
- href: "http://example.com"
- icon: "caret-right"
- icon_position: "before"
- type_attribute: "default"
- assertions:
- count:
- 'a.ecl-link--icon-before': 1
- 'a.ecl-link--icon-before svg': 1
- equals:
- 'a.ecl-link--standalone[href="http://example.com"] .ecl-link__label': "Button label"
-- array:
- '#type': pattern
- '#id': button
- '#variant': default
- '#fields':
- label: "Button label"
- href: "http://example.com"
- type_attribute: "standalone"
- assertions:
- count:
- 'a.ecl-link--standalone': 1
- 'a.ecl-link--icon': 0
- equals:
- 'a.ecl-link--standalone[href="http://example.com"]': "Button label"
-- array:
- '#type': pattern
- '#id': button
- '#fields':
- type_attribute: "submit"
- label: "Button label"
- assertions:
- count:
- 'button.ecl-button--primary': 1
- 'button.ecl-button[type="submit"]': 1
- equals:
- 'button.ecl-button--primary': "Button label"
-- array:
- '#type': pattern
- '#id': button
- '#variant': secondary
- '#fields':
- type_attribute: "submit"
- label: "Button label"
- assertions:
- count:
- 'button.ecl-button--secondary': 1
- 'button.ecl-button[type="submit"]': 1
- equals:
- 'button.ecl-button--secondary': "Button label"
-- array:
- '#type': pattern
- '#id': button
- '#variant': primary
- '#fields':
- type_attribute: "reset"
- label: "Button label"
- assertions:
- count:
- 'button.ecl-button[type="reset"]': 1
-- array:
- '#type': pattern
- '#id': button
- '#variant': primary
- '#fields':
- type_attribute: "button"
- is_block: true
- label: "Button label"
- assertions:
- count:
- 'button.ecl-button[type="button"]': 1
-- array:
- '#type': pattern
- '#id': button
- '#variant': secondary
- '#fields':
- label: "Button label"
- assertions:
- equals:
- 'button.ecl-button--secondary': "Button label"
-- array:
- '#type': pattern
- '#id': button
- '#variant': ghost
- '#fields':
- label: "Button label"
- assertions:
- equals:
- 'button.ecl-button--ghost': "Button label"
-- array:
- '#type': pattern
- '#id': button
- '#variant': search
- '#fields':
- label: "Button label"
- assertions:
- equals:
- 'button.ecl-button--search': "Button label"
-- array:
- '#type': pattern
- '#id': button
- '#variant': call
- '#fields':
- label: "Button label"
- assertions:
- equals:
- 'button.ecl-button--call': "Button label"
-- array:
- '#type': pattern
- '#id': button
- '#variant': form
- '#fields':
- label: "Button label"
- assertions:
- equals:
- 'button.ecl-button--form': "Button label"
-- array:
- '#type': pattern
- '#id': button
- '#variant': form_primary
- '#fields':
- label: "Button label"
- assertions:
- equals:
- 'button.ecl-button--form-primary': "Button label"
-- array:
- '#type': pattern
- '#id': button
- '#variant': splash_page
- '#fields':
- label: "Button label"
- assertions:
- equals:
- 'button.ecl-button--splash-page': "Button label"
-- array:
- '#type': pattern
- '#id': social_media_links_vertical
- '#fields':
- title: "View European Commission on:"
- links:
- - service: "facebook"
- label: "Facebook"
- url: "http://facebook.com"
- - service: "twitter"
- label: "Twitter"
- url: "http://twitter.com"
- - service: "instagram"
- label: "Instagram"
- url: "http://instagram.com"
- assertions:
- count:
- 'a.ecl-social-media-follow__link[href="http://facebook.com"]': 1
- 'a.ecl-social-media-follow__link[href="http://instagram.com"]': 1
- 'a.ecl-social-media-follow__link[href="http://twitter.com"]': 1
- equals:
- '.ecl-social-media-follow--vertical > p.ecl-social-media-follow__description': "View European Commission on:"
- 'a.ecl-social-media-follow__link[href="http://facebook.com"] span': "Facebook"
- 'a.ecl-social-media-follow__link[href="http://twitter.com"] span': "Twitter"
- 'a.ecl-social-media-follow__link[href="http://instagram.com"] span': "Instagram"
-- array:
- '#type': pattern
- '#id': social_media_links_horizontal
- '#fields':
- title: "View European Commission on:"
- links:
- - service: "facebook"
- label: "Facebook"
- url: "http://facebook.com"
- - service: "twitter"
- label: "Twitter"
- url: "http://twitter.com"
- - service: "instagram"
- label: "Instagram"
- url: "http://instagram.com"
- assertions:
- assertions:
- count:
- 'a.ecl-social-media-follow__link[href="http://facebook.com"]': 1
- 'a.ecl-social-media-follow__link[href="http://instagram.com"]': 1
- 'a.ecl-social-media-follow__link[href="http://twitter.com"]': 1
- equals:
- '.ecl-social-media-follow > p.ecl-social-media-follow__description': "View European Commission on:"
- 'a.ecl-social-media-follow__link[href="http://facebook.com"] span': "Facebook"
- 'a.ecl-social-media-follow__link[href="http://twitter.com"] span': "Twitter"
- 'a.ecl-social-media-follow__link[href="http://instagram.com"] span': "Instagram"
-- array:
- '#type': pattern
- '#id': social_icon
- '#fields':
- service: "facebook"
- label: "Facebook"
- url: "http://facebook.com"
- assertions:
- count:
- 'a.ecl-link.ecl-link--standalone.ecl-link--icon.ecl-link--icon-before[href="http://facebook.com"]': 1
- 'svg.ecl-link__icon': 1
- equals:
- 'a.ecl-link.ecl-link--standalone.ecl-link--icon.ecl-link--icon-before span.ecl-link__label': "Facebook"
-- array:
- '#type': pattern
- '#id': featured_item
- '#variant': "default"
- '#fields':
- title: "Example title"
- assertions:
- count:
- "div.ecl-card__image": 0
- 'h1.ecl-card__title': 1
- 'div.ecl-card__description': 0
- 'ul.ecl-card__info-container': 0
- equals:
- 'h1.ecl-card__title': "Example title"
-- array:
- '#type': pattern
- '#id': featured_item
- '#variant': "default"
- '#fields':
- title: "Example title"
- description: "Example description"
- image:
- src: "http://via.placeholder.com/120x80"
- alt: "Alternative of image"
- metas:
- - "Breaking news article"
- - "Brussels"
- link:
- href: "https://example.com"
- label: "Link title"
- assertions:
- count:
- "div.ecl-card__image[style=\"background-image:url('http://via.placeholder.com/120x80')\"]": 1
- 'h1.ecl-card__title a.ecl-link--standalone[href="https://example.com"]': 1
- 'a.ecl-button': 0
- equals:
- 'div.ecl-card__meta': "Breaking news article | Brussels"
- 'h1.ecl-card__title a': "Example title"
- 'div.ecl-card__description': "Example description"
-- array:
- '#type': pattern
- '#id': featured_item
- '#variant': "default"
- '#fields':
- title: "Example title"
- description: "Example description"
- length: 8
- image:
- src: "http://via.placeholder.com/120x80"
- alt: "Alternative of image"
- metas:
- - "Breaking news article"
- - "Brussels"
- link:
- href: "https://example.com"
- label: "Link title"
- assertions:
- count:
- "div.ecl-card__image[style=\"background-image:url('http://via.placeholder.com/120x80')\"]": 1
- 'h1.ecl-card__title a.ecl-link--standalone[href="https://example.com"]': 1
- 'a.ecl-button': 0
- equals:
- 'div.ecl-card__meta': "Breaking news article | Brussels"
- 'h1.ecl-card__title a': "Example title"
- 'div.ecl-card__description': "Example..."
-- array:
- '#type': pattern
- '#id': featured_item
- '#variant': "default"
- '#fields':
- description:
- '#type': pattern
- '#id': blockquote
- '#fields':
- body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.'
- author: 'John Doe'
- length: 25
- assertions:
- equals:
- 'div.ecl-card__description': ''
-- array:
- '#type': pattern
- '#id': featured_item
- '#variant': "default"
- '#fields':
- description:
- '#markup': 'Example description
'
- length: 8
- assertions:
- equals:
- 'div.ecl-card__description': 'Example...
'
-- array:
- '#type': pattern
- '#id': featured_item
- '#variant': "extended"
- '#fields':
- title: "Example title"
- description: "Example description"
- link:
- href: "https://example.com"
- label: "Link title"
- assertions:
- count:
- "div.ecl-card__image": 0
- 'h1.ecl-card__title a.ecl-link--standalone[href="https://example.com"]': 1
- 'a.ecl-button[href="https://example.com"]': 1
- equals:
- 'h1.ecl-card__title a': "Example title"
- 'div.ecl-card__description .ecl-paragraph': "Example description"
- 'a.ecl-button .ecl-button__label': "Link title"
-- array:
- '#type': pattern
- '#id': featured_item
- '#variant': "default"
- '#fields':
- title: "Example title"
- description: "Example description"
- footer_items:
- - icon: "calendar"
- text: "15-16 November 2019, 08:00 AM"
- - icon: "location"
- text: "Brussels, Belgium"
- assertions:
- count:
- "ul.ecl-card__info-container": 1
- equals:
- 'li.ecl-card__info-item:nth-child(1)' : '15-16 November 2019, 08:00 AM'
- 'li.ecl-card__info-item:nth-child(2)' : 'Brussels, Belgium'
-- array:
- '#type': pattern
- '#id': timeline
- '#fields':
- limit: 2
- limit_to: 4
- items:
- -
- label: "13 September 2017"
- title: "Item 1"
- body:
- '#markup': 'Economic and Monetary Union package of proposals'
- -
- label: "28-29 September 2017"
- title: "Item 2"
- body: "Lorem Ipsum 2"
- -
- body: "Lorem Ipsum 3"
- -
- body: "Lorem Ipsum 4"
- -
- body: "Lorem Ipsum 5"
- -
- label: "6 February 2018"
- title: "Item 6"
- body: "Lorem Ipsum 6"
- assertions:
- count:
- 'h2.ecl-u-type-heading-2': 0
- 'ol.ecl-timeline': 1
- 'li.ecl-timeline__item': 7
- '.ecl-timeline__item.ecl-timeline__item--toggle': 1
- '.ecl-timeline__item.ecl-timeline__item--collapsed': 2
- '.ecl-timeline__item:nth-child(3) .ecl-timeline__title': 0
- '.ecl-timeline__item:nth-child(4) .ecl-timeline__title': 0
- '.ecl-timeline__item:nth-child(6) .ecl-timeline__title': 0
- equals:
- '.ecl-timeline__item:nth-child(1) .ecl-timeline__title': "Item 1"
- '.ecl-timeline__item:nth-child(1) .ecl-timeline__label': "13 September 2017"
- '.ecl-timeline__item:nth-child(2) .ecl-timeline__title': "Item 2"
- '.ecl-timeline__item:nth-child(2) .ecl-timeline__label': "28-29 September 2017"
- '.ecl-timeline__item:nth-child(5) .ecl-timeline__toggle .ecl-button__label': "Show 2 more items"
- '.ecl-timeline__item:nth-child(7) .ecl-timeline__title': "Item 6"
- '.ecl-timeline__item:nth-child(7) .ecl-timeline__label': "6 February 2018"
- '.ecl-timeline__item:nth-child(1) .ecl-timeline__content': 'Economic and Monetary Union package of proposals'
- '.ecl-timeline__item:nth-child(2) .ecl-timeline__content': 'Lorem Ipsum 2'
- '.ecl-timeline__item:nth-child(3) .ecl-timeline__content': 'Lorem Ipsum 3'
- '.ecl-timeline__item:nth-child(4) .ecl-timeline__content': 'Lorem Ipsum 4'
- '.ecl-timeline__item:nth-child(6) .ecl-timeline__content': 'Lorem Ipsum 5'
- '.ecl-timeline__item:nth-child(7) .ecl-timeline__content': 'Lorem Ipsum 6'
-- array:
- '#type': pattern
- '#id': timeline
- '#fields':
- items:
- -
- title: "Item 1"
- body: "Lorem Ipsum 1"
- -
- title: "Item 2"
- body: "Lorem Ipsum 2"
- -
- title: "Item 3"
- body: "Lorem Ipsum 3"
- -
- title: "Item 4"
- body: "Lorem Ipsum 4"
- -
- title: "Item 5"
- body: "Lorem Ipsum 5"
- -
- title: "Item 6"
- body: "Lorem Ipsum 6"
- assertions:
- count:
- 'h2.ecl-u-type-heading-2': 0
- 'ol.ecl-timeline': 1
- 'li.ecl-timeline__item': 6
- '.ecl-timeline__item.ecl-timeline__item--toggle': 0
- '.ecl-timeline__item.ecl-timeline__item--collapsed': 0
- equals:
- '.ecl-timeline__item:nth-child(1) .ecl-timeline__title': "Item 1"
- '.ecl-timeline__item:nth-child(2) .ecl-timeline__title': "Item 2"
- '.ecl-timeline__item:nth-child(3) .ecl-timeline__title': "Item 3"
- '.ecl-timeline__item:nth-child(4) .ecl-timeline__title': "Item 4"
- '.ecl-timeline__item:nth-child(5) .ecl-timeline__title': "Item 5"
- '.ecl-timeline__item:nth-child(6) .ecl-timeline__title': "Item 6"
- '.ecl-timeline__item:nth-child(1) .ecl-timeline__content': 'Lorem Ipsum 1'
- '.ecl-timeline__item:nth-child(2) .ecl-timeline__content': 'Lorem Ipsum 2'
- '.ecl-timeline__item:nth-child(3) .ecl-timeline__content': 'Lorem Ipsum 3'
- '.ecl-timeline__item:nth-child(4) .ecl-timeline__content': 'Lorem Ipsum 4'
- '.ecl-timeline__item:nth-child(5) .ecl-timeline__content': 'Lorem Ipsum 5'
- '.ecl-timeline__item:nth-child(6) .ecl-timeline__content': 'Lorem Ipsum 6'
-- array:
- '#type': pattern
- '#id': timeline
- '#fields':
- limit: 2
- button_label: 'Show all timelines'
- items:
- -
- label: "13 September 2017"
- title: "Item 1"
- body:
- '#markup': 'Economic and Monetary Union package of proposals'
- -
- label: "28-29 September 2017"
- title: "Item 2"
- body: "Lorem Ipsum 2"
- -
- body: "Lorem Ipsum 3"
- -
- body: "Lorem Ipsum 4"
- -
- body: "Lorem Ipsum 5"
- -
- label: "6 February 2018"
- title: "Item 6"
- body: "Lorem Ipsum 6"
- assertions:
- count:
- 'h2.ecl-u-type-heading-2': 0
- 'ol.ecl-timeline': 1
- 'li.ecl-timeline__item': 7
- '.ecl-timeline__item.ecl-timeline__item--toggle': 1
- '.ecl-timeline__item.ecl-timeline__item--collapsed': 4
- '.ecl-timeline__item:nth-child(3) .ecl-timeline__title': 0
- '.ecl-timeline__item:nth-child(4) .ecl-timeline__title': 0
- '.ecl-timeline__item:nth-child(5) .ecl-timeline__title': 0
- equals:
- '.ecl-timeline__item:nth-child(1) .ecl-timeline__title': "Item 1"
- '.ecl-timeline__item:nth-child(1) .ecl-timeline__label': "13 September 2017"
- '.ecl-timeline__item:nth-child(2) .ecl-timeline__title': "Item 2"
- '.ecl-timeline__item:nth-child(2) .ecl-timeline__label': "28-29 September 2017"
- '.ecl-timeline__item:nth-child(6) .ecl-timeline__title': "Item 6"
- '.ecl-timeline__item:nth-child(6) .ecl-timeline__label': "6 February 2018"
- '.ecl-timeline__item:nth-child(7) .ecl-timeline__toggle .ecl-button__label': "Show all timelines"
- '.ecl-timeline__item:nth-child(1) .ecl-timeline__content': 'Economic and Monetary Union package of proposals'
- '.ecl-timeline__item:nth-child(2) .ecl-timeline__content': 'Lorem Ipsum 2'
- '.ecl-timeline__item:nth-child(3) .ecl-timeline__content': 'Lorem Ipsum 3'
- '.ecl-timeline__item:nth-child(4) .ecl-timeline__content': 'Lorem Ipsum 4'
- '.ecl-timeline__item:nth-child(5) .ecl-timeline__content': 'Lorem Ipsum 5'
- '.ecl-timeline__item:nth-child(6) .ecl-timeline__content': 'Lorem Ipsum 6'
-- array:
- '#type': pattern
- '#id': timeline
- '#fields':
- title: "Timeline heading"
- limit: 2
- items:
- -
- label: "13 September 2017"
- title: "Item 1"
- body:
- '#markup': 'Economic and Monetary Union package of proposals'
- -
- label: "28-29 September 2017"
- title: "Item 2"
- body: "Lorem Ipsum 2"
- -
- body: "Lorem Ipsum 3"
- -
- body: "Lorem Ipsum 4"
- -
- body: "Lorem Ipsum 5"
- -
- label: "6 February 2018"
- title: "Item 6"
- body: "Lorem Ipsum 6"
- assertions:
- count:
- 'h2.ecl-u-type-heading-2': 1
- 'ol.ecl-timeline': 1
- 'li.ecl-timeline__item': 7
- '.ecl-timeline__item.ecl-timeline__item--toggle': 1
- '.ecl-timeline__item.ecl-timeline__item--collapsed': 4
- '.ecl-timeline__item:nth-child(3) .ecl-timeline__title': 0
- '.ecl-timeline__item:nth-child(4) .ecl-timeline__title': 0
- '.ecl-timeline__item:nth-child(5) .ecl-timeline__title': 0
- equals:
- 'h2.ecl-u-type-heading-2': "Timeline heading"
- '.ecl-timeline__item:nth-child(1) .ecl-timeline__title': "Item 1"
- '.ecl-timeline__item:nth-child(1) .ecl-timeline__label': "13 September 2017"
- '.ecl-timeline__item:nth-child(2) .ecl-timeline__title': "Item 2"
- '.ecl-timeline__item:nth-child(2) .ecl-timeline__label': "28-29 September 2017"
- '.ecl-timeline__item:nth-child(6) .ecl-timeline__title': "Item 6"
- '.ecl-timeline__item:nth-child(6) .ecl-timeline__label': "6 February 2018"
- '.ecl-timeline__item:nth-child(7) .ecl-timeline__toggle .ecl-button__label': "Show 4 more items"
- '.ecl-timeline__item:nth-child(1) .ecl-timeline__content': 'Economic and Monetary Union package of proposals'
- '.ecl-timeline__item:nth-child(2) .ecl-timeline__content': 'Lorem Ipsum 2'
- '.ecl-timeline__item:nth-child(3) .ecl-timeline__content': 'Lorem Ipsum 3'
- '.ecl-timeline__item:nth-child(4) .ecl-timeline__content': 'Lorem Ipsum 4'
- '.ecl-timeline__item:nth-child(5) .ecl-timeline__content': 'Lorem Ipsum 5'
- '.ecl-timeline__item:nth-child(6) .ecl-timeline__content': 'Lorem Ipsum 6'
-- array:
- '#type': pattern
- '#id': text_featured_media
- '#variant': "left_simple"
- '#fields':
- title: "Heading"
- text_title: "Title"
- image:
- src: "http://via.placeholder.com/150x150"
- caption: "Some caption text for the image"
- text: "Some more text"
- link:
- label: "Call to action"
- path: "http://example.com"
- assertions:
- count:
- 'div.ecl-row': 1
- 'div.ecl-col-m-6.ecl-u-mb-m.ecl-u-mb-m-none.ecl-u-order-m-last': 1
- 'div.ecl-u-type-prolonged-m.ecl-u-type-bold.ecl-u-type-color-grey': 1
- 'figure.ecl-media-container': 1
- 'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1
- 'div.ecl-media-container__media--ratio-16-9 iframe': 0
- 'figcaption.ecl-media-container__caption': 1
- 'a.ecl-link.ecl-link--standalone[href="http://example.com"]': 1
- equals:
- 'h2.ecl-u-type-heading-2': "Heading"
- 'div.ecl-u-type-prolonged-m.ecl-u-type-bold.ecl-u-type-color-grey': "Title"
- 'figcaption.ecl-media-container__caption': "Some caption text for the image"
- 'div.ecl-col-m-6 > div.ecl': "Some more text"
- 'a.ecl-link span.ecl-link__label': "Call to action"
-- array:
- '#type': pattern
- '#id': text_featured_media
- '#variant': "right_simple"
- '#fields':
- text_title: "Title"
- image:
- src: "http://via.placeholder.com/150x150"
- caption: "Some caption text for the image"
- text: "Some more text"
- link:
- label: "Call to action"
- path: "http://example.com"
- assertions:
- count:
- 'h2.ecl-u-type-heading-2': 0
- 'div.ecl-row': 1
- 'div.ecl-col-m-6.ecl-u-mb-m.ecl-u-mb-m-none.ecl-u-order-m-last': 0
- 'div.ecl-u-type-prolonged-m.ecl-u-type-bold.ecl-u-type-color-grey': 1
- 'figure.ecl-media-container': 1
- 'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1
- 'div.ecl-media-container__media--ratio-16-9 iframe': 0
- 'figcaption.ecl-media-container__caption': 1
- 'a.ecl-link.ecl-link--standalone[href="http://example.com"]': 1
- equals:
- 'div.ecl-u-type-prolonged-m.ecl-u-type-bold.ecl-u-type-color-grey': "Title"
- 'figcaption.ecl-media-container__caption': "Some caption text for the image"
- 'div.ecl-col-m-6 > div.ecl': "Some more text"
- 'a.ecl-link span.ecl-link__label': "Call to action"
-- array:
- '#type': pattern
- '#id': text_featured_media
- '#variant': "right_simple"
- '#fields':
- title: "Heading"
- image:
- src: "http://via.placeholder.com/150x150"
- caption: "Some caption text for the image"
- text: "Some more text"
- link:
- label: "Call to action"
- path: "http://example.com"
- assertions:
- count:
- 'h2.ecl-u-type-heading-2': 1
- 'div.ecl-row': 1
- 'div.ecl-col-m-6.ecl-u-mb-m.ecl-u-mb-m-none.ecl-u-order-m-last': 0
- 'div.ecl-u-type-prolonged-m.ecl-u-type-bold.ecl-u-type-color-grey': 0
- 'figure.ecl-media-container': 1
- 'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1
- 'div.ecl-media-container__media--ratio-16-9 iframe': 0
- 'figcaption.ecl-media-container__caption': 1
- 'a.ecl-link.ecl-link--standalone[href="http://example.com"]': 1
- equals:
- 'h2.ecl-u-type-heading-2': "Heading"
- 'figcaption.ecl-media-container__caption': "Some caption text for the image"
- 'div.ecl-col-m-6 > div.ecl': "Some more text"
- 'a.ecl-link span.ecl-link__label': "Call to action"
-- array:
- '#type': pattern
- '#id': text_featured_media
- '#fields':
- title: "Heading"
- text_title: "Title"
- caption: "Some caption text for the image"
- text: "Some more text"
- assertions:
- count:
- 'div.ecl-row': 1
- 'div.ecl-col-md-6.ecl-u-mb-m.ecl-u-mb-md-none': 0
- 'div.ecl-u-type-prolonged-m.ecl-u-type-bold.ecl-u-type-color-grey': 1
- 'figure.ecl-media-container': 0
- 'div.ecl-col-m-6.ecl': 0
- 'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 0
- 'div.ecl-media-container__media--ratio-16-9 iframe': 0
- 'figcaption.ecl-media-container__caption': 0
- 'a.ecl-link': 0
- equals:
- 'h2.ecl-u-type-heading-2': "Heading"
- 'div.ecl-u-type-prolonged-m.ecl-u-type-bold.ecl-u-type-color-grey': "Title"
- 'div.ecl-col-12 > div.ecl': "Some more text"
-- array:
- '#type': pattern
- '#id': text_featured_media
- '#variant': "right_featured"
- '#fields':
- title: "Heading"
- text_title: "Title"
- image:
- src: "http://via.placeholder.com/150x150"
- text: "Some more text"
- link:
- label: "Call to action"
- path: "http://example.com"
- assertions:
- count:
- 'div.ecl-row': 1
- 'div.ecl-col-m-6.ecl-u-mb-m.ecl-u-mb-m-none.ecl-u-order-m-last': 0
- 'div.ecl-u-type-prolonged-m.ecl-u-type-bold.ecl-u-type-color-grey': 1
- 'figure.ecl-media-container': 1
- 'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1
- 'div.ecl-media-container__media--ratio-16-9 iframe': 0
- 'figcaption.ecl-media-container__caption': 0
- 'a.ecl-link.ecl-link--cta[href="http://example.com"]': 1
- equals:
- 'h2.ecl-u-type-heading-2': "Heading"
- 'div.ecl-u-type-prolonged-m.ecl-u-type-bold.ecl-u-type-color-grey': "Title"
- 'div.ecl-col-m-6 div.ecl': "Some more text"
- 'a.ecl-link span.ecl-link__label': "Call to action"
-- array:
- '#type': pattern
- '#id': text_featured_media
- '#fields':
- title: "Heading"
- caption: "Some caption"
- assertions:
- count:
- 'div.ecl-row': 0
- 'figure.ecl-media-container': 0
- 'div.ecl-col-md-6.ecl-u-mb-m.ecl-u-mb-md-none': 0
- 'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 0
- 'div.ecl-media-container__media--ratio-16-9 iframe': 0
- 'figcaption.ecl-media-container__caption': 0
- 'h2.ecl-u-type-heading-2': 0
- 'a.ecl-link': 0
- equals: {}
-- array:
- '#type': pattern
- '#id': text_featured_media
- '#variant': "left_featured"
- '#fields':
- title: "Heading"
- video:
- '#type': 'html_tag'
- '#tag': 'iframe'
- '#attributes':
- id: 'videoplayerI-181645'
- src: '//ec.europa.eu/avservices/play.cfm?ref=I-181645'
- text: "Some more text"
- link:
- label: "Call to action"
- path: "http://example.com"
- assertions:
- count:
- 'div.ecl-row': 1
- 'div.ecl-col-m-6.ecl-u-mb-m.ecl-u-mb-m-none.ecl-u-order-m-last': 1
- 'figure.ecl-media-container': 1
- 'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 0
- 'div.ecl-media-container__media--ratio-16-9 iframe[src="//ec.europa.eu/avservices/play.cfm?ref=I-181645"]': 1
- 'figcaption.ecl-media-container__caption': 0
- 'a.ecl-link.ecl-link--cta[href="http://example.com"]': 1
- equals:
- 'h2.ecl-u-type-heading-2': "Heading"
- 'div.ecl-col-m-6 div.ecl': "Some more text"
- 'a.ecl-link span.ecl-link__label': "Call to action"
-- array:
- '#type': pattern
- '#id': text_featured_media
- '#fields':
- video:
- '#type': 'html_tag'
- '#tag': 'iframe'
- '#attributes':
- id: 'videoplayerI-181645'
- src: '//ec.europa.eu/avservices/play.cfm?ref=I-181645'
- video_ratio: "invalid"
- assertions:
- count:
- 'div.ecl-media-container__media--ratio-16-9 iframe[src="//ec.europa.eu/avservices/play.cfm?ref=I-181645"]': 1
-- array:
- '#type': pattern
- '#id': text_featured_media
- '#fields':
- video:
- '#type': 'html_tag'
- '#tag': 'iframe'
- '#attributes':
- id: 'videoplayerI-181645'
- src: '//ec.europa.eu/avservices/play.cfm?ref=I-181645'
- video_ratio: "1:1"
- link:
- label: "Call to action"
- path: "http://example.com"
- assertions:
- count:
- 'div.ecl-media-container__media--ratio-1-1 iframe[src="//ec.europa.eu/avservices/play.cfm?ref=I-181645"]': 1
- 'div.ecl-col-m-6.ecl-u-mb-m.ecl-u-mb-m-none.ecl-u-order-m-last': 1
- 'a.ecl-link.ecl-link--standalone[href="http://example.com"]': 1
-- array:
- '#type': pattern
- '#id': icons_with_text
- '#fields':
- items:
- -
- icon: "file"
- text: "Culture | Innovation"
- -
- icon: "calendar"
- text: "15-16 November 2019, 08:00 AM"
- -
- icon: "location"
- text: "Brussels, Belgium"
- -
- icon: "livestreaming"
- text: "Live streaming available"
- assertions:
- count:
- 'ul.ecl-unordered-list--no-bullet': 1
- 'ul li.ecl-unordered-list__item': 4
- 'ul li.ecl-unordered-list__item svg': 4
- equals:
- 'ul li.ecl-unordered-list__item:nth-child(1)': 'Culture | Innovation'
- 'ul li.ecl-unordered-list__item:nth-child(2)': '15-16 November 2019, 08:00 AM'
- 'ul li.ecl-unordered-list__item:nth-child(3)': 'Brussels, Belgium'
- 'ul li.ecl-unordered-list__item:nth-child(4)': 'Live streaming available'
-- array:
- '#type': pattern
- '#id': icons_with_text
- assertions:
- count:
- 'ul.ecl-unordered-list--no-bullet': 0
-- array:
- '#type': pattern
- '#id': icons_with_text
- '#fields':
- items:
- -
- icon: "file"
- text: "Culture | Innovation"
- -
- text: "15-16 November 2019, 08:00 AM"
- -
- icon: "location"
- -
- icon: "livestreaming"
- text: "Live streaming available"
- assertions:
- count:
- 'ul.ecl-unordered-list--no-bullet': 1
- 'ul li.ecl-unordered-list__item': 3
- 'ul li.ecl-unordered-list__item svg': 3
- equals:
- 'ul li.ecl-unordered-list__item:nth-child(1)': 'Culture | Innovation'
- 'ul li.ecl-unordered-list__item:nth-child(2)': '15-16 November 2019, 08:00 AM'
- 'ul li.ecl-unordered-list__item:nth-child(3)': 'Live streaming available'
-- array:
- '#type': "pattern"
- '#id': "tag"
- '#variant': "default"
- '#fields':
- tag_type: "link"
- url: "http://example.com"
- label: "Tag label"
- assertions:
- equals:
- 'a.ecl-tag': "Tag label"
- count:
- 'a.ecl-tag[href="http://example.com"]': 1
-- array:
- '#type': "pattern"
- '#id': "tag"
- '#variant': "default"
- '#fields':
- tag_type: "removable"
- url: "http://example.com"
- label: "Tag label"
- assertions:
- contains:
- '.ecl-tag': "Tag label"
- count:
- '.ecl-tag--removable': 1
-- array:
- '#type': "pattern"
- '#id': "tag"
- '#variant': "default"
- '#fields':
- tag_type: "display"
- url: "http://example.com"
- label: "Tag label"
- assertions:
- contains:
- '.ecl-tag': "Tag label"
- count:
- '.ecl-tag--display': 1
-- array:
- '#type': "pattern"
- '#id': "navigation_menu"
- '#variant': "vertical"
- '#fields':
- label: "Menu"
- site_name: "Site name"
- items:
- - href: "#"
- label: 'Parent 1'
- children:
- - href: '#'
- label: 'Child 1.1'
- is_current: true
- - href: '#'
- label: 'Child 1.2'
- - href: '#'
- label: 'Child 1.3'
- - href: '#'
- label: 'Child 1.4'
- - href: "#"
- label: "Parent 2"
- children:
- - href: '#'
- label: 'Child 2.1'
- - href: '#'
- label: 'Child 2.2'
- - href: '#'
- label: 'Child 2.3'
- - href: "#"
- label: "Link"
- assertions:
- contains:
- '.ecl-menu__open': "Menu"
- '.ecl-menu__inner-header button.ecl-menu__close .ecl-button__label': "Close"
- '.ecl-menu__inner-header button.ecl-menu__back .ecl-button__label': "Back"
- 'li.ecl-menu__item:nth-child(1) a.ecl-menu__link': "Parent 1"
- 'li.ecl-menu__item:nth-child(2) a.ecl-menu__link': "Parent 2"
- equals:
- 'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem--current a.ecl-menu__sublink': 'Child 1.1'
- 'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(2) a.ecl-menu__sublink': 'Child 1.2'
- 'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(3) a.ecl-menu__sublink': 'Child 1.3'
- 'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(4) a.ecl-menu__sublink': 'Child 1.4'
- 'li.ecl-menu__item:nth-child(2) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(1) a.ecl-menu__sublink': 'Child 2.1'
- 'li.ecl-menu__item:nth-child(2) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(2) a.ecl-menu__sublink': 'Child 2.2'
- 'li.ecl-menu__item:nth-child(2) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(3) a.ecl-menu__sublink': 'Child 2.3'
- 'li.ecl-menu__item:nth-child(3) a.ecl-menu__link': "Link"
-- array:
- '#type': "pattern"
- '#id': "navigation_menu"
- '#variant': "vertical"
- '#fields':
- label: "Custom Menu"
- items:
- - href: "#"
- label: 'Parent 1'
- children:
- - href: '#'
- label: 'Child 1.1'
- - href: '#'
- label: 'Child 1.2'
- - href: '#'
- label: 'Child 1.3'
- - href: '#'
- label: 'Child 1.4'
- - href: '#'
- label: 'Child 1.5'
- - href: '#'
- label: 'Child 1.6'
- - href: '#'
- label: 'Child 1.7'
- - href: '#'
- label: 'Child 1.8'
- assertions:
- contains:
- '.ecl-menu__open': "Custom Menu"
- '.ecl-menu__inner-header button.ecl-menu__close .ecl-button__label': "Close"
- '.ecl-menu__inner-header button.ecl-menu__back .ecl-button__label': "Back"
- 'li.ecl-menu__item:nth-child(1) a.ecl-menu__link': "Parent 1"
- equals:
- 'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(1) a.ecl-menu__sublink': 'Child 1.1'
- 'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(2) a.ecl-menu__sublink': 'Child 1.2'
- 'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(3) a.ecl-menu__sublink': 'Child 1.3'
- 'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(4) a.ecl-menu__sublink': 'Child 1.4'
- 'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(5) a.ecl-menu__sublink': 'Child 1.5'
- 'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(6) a.ecl-menu__sublink': 'Child 1.6'
- 'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(7) a.ecl-menu__sublink': 'Child 1.7'
- 'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(8) a.ecl-menu__sublink': 'Child 1.8'
-- array:
- '#type': 'pattern'
- '#id': 'link'
- '#fields':
- url: '/'
- text: 'Link text'
- assertions:
- equals:
- 'a.ecl-link.ecl-link--standalone': 'Link text'
- count:
- 'a.ecl-link[href="/"]': 1
- array:
'#type': 'pattern'
- '#id': 'link'
- '#fields':
- url: '/'
- text: 'Link text'
- variant: 'standalone'
- assertions:
- equals:
- 'a.ecl-link.ecl-link--standalone': 'Link text'
+ '#id': 'list_with_illustration'
+ '#variant': "vertical_images_large"
+ '#fields':
+ zebra: true
+ items:
+ - title: "Business, Economy, Euro"
+ description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
+ image:
+ src: "https://placeimg.com/1000/500/arch"
+ alt: "Alternative text for featured item image 1"
+ - title: "About the European Union"
+ description: "The EU and its institutions, how to visit and work at the EU."
+ image:
+ src: "https://placeimg.com/500/500/arch"
+ alt: "Alternative text for featured item image 2"
+ assertions:
+ count:
+ div.ecl-list-illustration: 1
+ div.ecl-list-illustration.ecl-list-illustration--zebra: 1
+ div.ecl-list-illustration__item: 2
+ div.ecl-list-illustration__image: 2
+ div.ecl-list-illustration__image.ecl-list-illustration__image--square: 0
+ div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 1"]: 1
+ div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/1000/500/arch')"]: 1
+ div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 2"]: 1
+ div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/500/500/arch')"]: 1
+ contains:
+ 'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
+ 'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
+ 'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__title': 'About the European Union'
+ 'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__description': 'The EU and its institutions, how to visit and work at the EU.'
- array:
'#type': 'pattern'
- '#id': 'link'
- '#fields':
- url: '/'
- text: 'Link text'
- variant: 'cta'
- assertions:
- equals:
- 'a.ecl-link.ecl-link--cta': 'Link text'
+ '#id': 'list_with_illustration'
+ '#variant': "vertical_images_square"
+ '#fields':
+ zebra: true
+ items:
+ - title: "Business, Economy, Euro"
+ description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
+ image:
+ src: "https://placeimg.com/1000/500/arch"
+ alt: "Alternative text for featured item image 1"
+ - title: "About the European Union"
+ description: "The EU and its institutions, how to visit and work at the EU."
+ image:
+ src: "https://placeimg.com/500/500/arch"
+ alt: "Alternative text for featured item image 2"
+ assertions:
+ count:
+ div.ecl-list-illustration: 1
+ div.ecl-list-illustration.ecl-list-illustration--zebra: 1
+ div.ecl-list-illustration__item: 2
+ div.ecl-list-illustration__image: 2
+ div.ecl-list-illustration__image.ecl-list-illustration__image--square: 2
+ div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 1"]: 1
+ div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/1000/500/arch')"]: 1
+ div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 2"]: 1
+ div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/500/500/arch')"]: 1
+ contains:
+ 'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
+ 'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
+ 'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__title': 'About the European Union'
+ 'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__description': 'The EU and its institutions, how to visit and work at the EU.'
- array:
'#type': 'pattern'
- '#id': 'facts_figures'
+ '#id': 'list_with_illustration'
+ '#variant': "vertical_icons"
'#fields':
+ zebra: false
items:
- - icon: 'instagram'
- value: '00.0 million'
- title: 'Lorem ipsum'
- description: 'Nunc condimentum sapien ut nibh finibus suscipit vitae at justo. Morbi quis odio faucibus, commodo tortor id, elementum libero.'
- - icon: 'external'
- value: '10.0 millions'
- title: 'Nam lacinia nisl eget diam mattis'
- description: 'Sed efficitur bibendum rutrum. Nunc feugiat congue augue ac consectetur.'
- view_all:
- label: 'View all metrics'
- path: 'https://example.com'
+ - title: "Business, Economy, Euro"
+ description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
+ icon: "growth"
+ - title: "About the European Union"
+ description: "The EU and its institutions, how to visit and work at the EU."
+ icon: "budget"
assertions:
count:
- 'div.ecl-fact-figures.ecl-fact-figures--col-3 div.ecl-fact-figures__items': 1
- 'div.ecl-fact-figures__item:nth-child(1) svg.ecl-icon.ecl-icon--m.ecl-fact-figures__icon': 1
- 'div.ecl-fact-figures__item:nth-child(2) svg.ecl-icon.ecl-icon--m.ecl-fact-figures__icon': 1
- 'div.ecl-fact-figures__view-all': 1
+ div.ecl-list-illustration: 1
+ div.ecl-list-illustration.ecl-list-illustration--zebra: 0
+ div.ecl-list-illustration__item: 2
+ div.ecl-list-illustration__image: 0
+ contains:
+ 'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
+ 'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
+ 'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__title': 'About the European Union'
+ 'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__description': 'The EU and its institutions, how to visit and work at the EU.'
equals:
- 'div.ecl-fact-figures__item:nth-child(1) svg.ecl-icon.ecl-icon--m.ecl-fact-figures__icon': ''
- 'div.ecl-fact-figures__item:nth-child(1) div.ecl-fact-figures__value': '00.0 million'
- 'div.ecl-fact-figures__item:nth-child(1) div.ecl-fact-figures__title': 'Lorem ipsum'
- 'div.ecl-fact-figures__item:nth-child(1) div.ecl-fact-figures__description': 'Nunc condimentum sapien ut nibh finibus suscipit vitae at justo. Morbi quis odio faucibus, commodo tortor id, elementum libero.'
- 'div.ecl-fact-figures__item:nth-child(2) svg.ecl-icon.ecl-icon--m.ecl-fact-figures__icon': ''
- 'div.ecl-fact-figures__item:nth-child(2) div.ecl-fact-figures__value': '10.0 millions'
- 'div.ecl-fact-figures__item:nth-child(2) div.ecl-fact-figures__title': 'Nam lacinia nisl eget diam mattis'
- 'div.ecl-fact-figures__item:nth-child(2) div.ecl-fact-figures__description': 'Sed efficitur bibendum rutrum. Nunc feugiat congue augue ac consectetur.'
- 'div.ecl-fact-figures__view-all a.ecl-link.ecl-link--standalone.ecl-fact-figures__view-all-link[href="https://example.com"] span.ecl-link__label': 'View all metrics'
+ 'div.ecl-list-illustration__item:nth-child(1) svg.ecl-icon': ''
+ 'div.ecl-list-illustration__item:nth-child(2) svg.ecl-icon': ''
- array:
'#type': 'pattern'
- '#id': 'facts_figures'
- '#fields':
- items:
- - icon: 'instagram'
- value: '00.0 million'
- title: 'Lorem ipsum'
- description: 'Nunc condimentum sapien ut nibh finibus suscipit vitae at justo. Morbi quis odio faucibus, commodo tortor id, elementum libero.'
- - icon: 'external'
- value: '10.0 millions'
- title: 'Nam lacinia nisl eget diam mattis'
- description: 'Sed efficitur bibendum rutrum. Nunc feugiat congue augue ac consectetur.'
- assertions:
- count:
- 'div.ecl-fact-figures.ecl-fact-figures--col-3 div.ecl-fact-figures__items': 1
- 'div.ecl-fact-figures__view-all': 0
+ '#id': 'list_with_illustration'
+ '#variant': "horizontal_images_large"
+ '#fields':
+ column: 2
+ items:
+ - title: "Business, Economy, Euro"
+ description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
+ image:
+ src: "https://placeimg.com/1000/500/arch"
+ alt: "Alternative text for featured item image 1"
+ - title: "About the European Union"
+ description: "The EU and its institutions, how to visit and work at the EU."
+ image:
+ src: "https://placeimg.com/500/500/arch"
+ alt: "Alternative text for featured item image 2"
+ assertions:
+ count:
+ div.ecl-list-illustration: 1
+ div.ecl-list-illustration.ecl-list-illustration--col-2: 1
+ div.ecl-list-illustration__item: 2
+ div.ecl-list-illustration__image: 2
+ div.ecl-list-illustration__image.ecl-list-illustration__image--square: 0
+ div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 1"]: 1
+ div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/1000/500/arch')"]: 1
+ div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 2"]: 1
+ div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/500/500/arch')"]: 1
+ contains:
+ 'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
+ 'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
+ 'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__title': 'About the European Union'
+ 'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__description': 'The EU and its institutions, how to visit and work at the EU.'
+- array:
+ '#type': 'pattern'
+ '#id': 'list_with_illustration'
+ '#variant': "horizontal_images_square"
+ '#fields':
+ column: 3
+ items:
+ - title: "Business, Economy, Euro"
+ description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
+ image:
+ src: "https://placeimg.com/1000/500/arch"
+ alt: "Alternative text for featured item image 1"
+ - title: "About the European Union"
+ description: "The EU and its institutions, how to visit and work at the EU."
+ image:
+ src: "https://placeimg.com/500/500/arch"
+ alt: "Alternative text for featured item image 2"
+ assertions:
+ count:
+ div.ecl-list-illustration: 1
+ div.ecl-list-illustration.ecl-list-illustration--col-3: 1
+ div.ecl-list-illustration__item: 2
+ div.ecl-list-illustration__image: 2
+ div.ecl-list-illustration__image.ecl-list-illustration__image--square: 2
+ div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 1"]: 1
+ div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/1000/500/arch')"]: 1
+ div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 2"]: 1
+ div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/500/500/arch')"]: 1
+ contains:
+ 'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
+ 'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
+ 'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__title': 'About the European Union'
+ 'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__description': 'The EU and its institutions, how to visit and work at the EU.'
- array:
'#type': 'pattern'
- '#id': 'active_search_filters'
+ '#id': 'list_with_illustration'
+ '#variant': "horizontal_icons"
'#fields':
- name: 'Source'
+ column: 2
items:
- - label: 'DG Trad'
- url: 'http://dg-trad.com'
- - label: 'Health, well-being & Consumer protection'
- url: 'http://health.com'
- - label: 'No link'
- url: ''
+ - title: "Business, Economy, Euro"
+ description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
+ icon: "growth"
+ - title: "About the European Union"
+ description: "The EU and its institutions, how to visit and work at the EU."
+ icon: "budget"
assertions:
count:
- 'div.active-search-filters.ecl-u-d-m-flex': 1
- 'a.ecl-u-mr-xs.ecl-u-mb-s.ecl-tag.ecl-tag--removable[href="http://dg-trad.com"]': 1
- 'a.ecl-u-mr-xs.ecl-u-mb-s.ecl-tag.ecl-tag--removable[href="http://health.com"]': 1
- 'span.ecl-tag__icon': 2
- 'svg.ecl-icon.ecl-icon--xs.ecl-tag__icon-close': 2
- 'svg.ecl-icon.ecl-icon--xs.ecl-tag__icon-close-filled': 2
+ div.ecl-list-illustration: 1
+ div.ecl-list-illustration.ecl-list-illustration--col-2: 1
+ div.ecl-list-illustration__item: 2
+ div.ecl-list-illustration__image: 0
contains:
- 'a.ecl-u-mr-xs.ecl-u-mb-s.ecl-tag.ecl-tag--removable[href="http://dg-trad.com"]': 'DG Trad'
- 'a.ecl-u-mr-xs.ecl-u-mb-s.ecl-tag.ecl-tag--removable[href="http://health.com"]': 'Health, well-being & Consumer protection'
- 'div.ecl-u-mr-xs.ecl-u-mt-s.ecl-tag.ecl-tag--removable': 'No link'
+ 'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
+ 'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
+ 'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__title': 'About the European Union'
+ 'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__description': 'The EU and its institutions, how to visit and work at the EU.'
equals:
- 'div.active-search-filters__name span': 'Source'
+ 'div.ecl-list-illustration__item:nth-child(1) svg.ecl-icon': ''
+ 'div.ecl-list-illustration__item:nth-child(2) svg.ecl-icon': ''
diff --git a/tests/src/PatternAssertions/ListWithIllustrationAssert.php b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
new file mode 100644
index 0000000000..babc51a970
--- /dev/null
+++ b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
@@ -0,0 +1,121 @@
+ [
+ [$this, 'assertColumns'],
+ $variant,
+ ],
+ 'zebra' => [
+ [$this, 'assertElementExists'],
+ '.ecl-list-illustration--zebra',
+ ],
+ 'items' => [
+ [$this, 'assertItems'],
+ $variant,
+ ],
+ ];
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ protected function assertBaseElements(string $html, string $variant): void {
+ $crawler = new Crawler($html);
+ self::assertElementExists('ecl-list-illustration', $crawler);
+ }
+
+ /**
+ * Asserts the columns of the list.
+ *
+ * @param int $column
+ * The expected image values.
+ * @param string $variant
+ * The variant of the pattern being checked.
+ * @param \Symfony\Component\DomCrawler\Crawler $crawler
+ * The DomCrawler where to check the element.
+ */
+ protected function assertColumns(int $column, string $variant, Crawler $crawler): void {
+ $column_selector = '.ecl-list-illustration--col-' . $column;
+ self::assertElementExists($column_selector, $crawler);
+ }
+
+ /**
+ * Asserts the info block of a card.
+ *
+ * @param array $expected_items
+ * The expected list items.
+ * @param string $variant
+ * The variant of the pattern being checked.
+ * @param \Symfony\Component\DomCrawler\Crawler $crawler
+ * The DomCrawler where to check the element.
+ */
+ protected function assertItems(array $expected_items, string $variant, Crawler $crawler): void {
+ $item_elements = $crawler->filter('.ecl-list-illustration__item');
+ self::assertCount(count($expected_items), $item_elements, 'The expected list items do not match the found list items.');
+ foreach ($expected_items as $index => $expected_item) {
+ $item_element = $item_elements->eq($index);
+ self::assertElementText($expected_item['title'], 'ecl-list-illustration__title', $item_element);
+ self::assertElementText($expected_item['description'], 'ecl-list-illustration__description', $item_element);
+ if (isset($expected_item['image'])) {
+ self::assertElementExists('.ecl-list-illustration__image', $item_element);
+ $image_element = $item_element->filter('.ecl-list-illustration__image');
+ self::assertEquals($expected_item['image']['alt'], $image_element->attr('aria-label'));
+ self::assertStringContainsString($expected_item['image']['src'], $image_element->attr('style'));
+ if (strpos($variant, 'square') !== FALSE) {
+ self::assertElementExists('.ecl-list-illustration__image--square', $item_element);
+ }
+ }
+ if (isset($expected_item['icon'])) {
+ $icon_element = $item_element->filter('svg.ecl-icon use');
+ $this::assertStringContainsString('#' . $expected_item['icon'], $icon_element->attr('xlink:href'));
+ }
+ }
+ }
+
+ /**
+ * {@inheritdoc}
+ *
+ * @SuppressWarnings(PHPMD.CyclomaticComplexity)
+ */
+ protected function getPatternVariant(string $html): string {
+ $crawler = new Crawler($html);
+ // Check whether its horizontal or vertical.
+ $variant = 'vertical';
+ $list = $crawler->filter('.ecl-list-illustration');
+ if (strpos($list->attr('class'), 'ecl-list-illustration--col') !== FALSE) {
+ $variant = 'horizontal';
+ }
+ // Check whether we have images or icons.
+ // If we have one image, we assume its an image variant.
+ $image_element = $crawler->filter('.ecl-list-illustration__item');
+ if ($image_element) {
+ $variant .= '_images';
+ // Check whether it's square or not.
+ if (strpos($image_element->attr('class'), 'ecl-list-illustration__image--square') !== FALSE) {
+ $variant .= '_square';
+ }
+ else {
+ $variant .= '_large';
+ }
+ return $variant;
+ }
+ $variant .= '_icons';
+ return $variant;
+ }
+
+}