diff --git a/Makefile b/Makefile
index 54e78abb3..81645e9da 100644
--- a/Makefile
+++ b/Makefile
@@ -17,6 +17,7 @@ build-ecl:
# Add ECL dependencies that cannot be required by ECL.
# @see https://github.com/ec-europa/europa-component-library#warning-momentjs
yarn --cwd ./ecl-build add moment@2.29.1 -W
+ yarn --cwd ./ecl-build add pikaday@1.8.2 -W
yarn --cwd ./ecl-build add svg4everybody@2.1.9 -W
yarn --cwd ./ecl-build dist:presets
@@ -42,6 +43,7 @@ copy-dist:
cp -r ./ecl-build/dist/packages/ec dist/ec
cp -r ./ecl-build/dist/packages/eu dist/eu
cp ./ecl-build/node_modules/moment/min/moment.min.js ./dist/js
+ cp ./ecl-build/node_modules/pikaday/pikaday.js ./dist/js
cp ./ecl-build/node_modules/svg4everybody/dist/svg4everybody.js ./dist/js
## copy-twig : copy ECL twigs in the destination directory.
diff --git a/modules/oe_theme_contact_forms/oe_theme_contact_forms.module b/modules/oe_theme_contact_forms/oe_theme_contact_forms.module
index d83d073c8..ed0fad1e0 100644
--- a/modules/oe_theme_contact_forms/oe_theme_contact_forms.module
+++ b/modules/oe_theme_contact_forms/oe_theme_contact_forms.module
@@ -5,7 +5,7 @@
* Module file used for theming the corporate contact forms.
*/
-declare(strict_types = 1);
+declare(strict_types=1);
use Drupal\contact\Entity\ContactForm;
use Drupal\contact\MessageInterface;
diff --git a/modules/oe_theme_content_call_proposals/oe_theme_content_call_proposals.module b/modules/oe_theme_content_call_proposals/oe_theme_content_call_proposals.module
index f75517ade..d48125a90 100644
--- a/modules/oe_theme_content_call_proposals/oe_theme_content_call_proposals.module
+++ b/modules/oe_theme_content_call_proposals/oe_theme_content_call_proposals.module
@@ -5,7 +5,7 @@
* Module file is used for theming the Call for proposals content type.
*/
-declare(strict_types = 1);
+declare(strict_types=1);
use Drupal\Core\Entity\Display\EntityViewDisplayInterface;
use Drupal\Core\Entity\EntityInterface;
diff --git a/modules/oe_theme_content_call_proposals/oe_theme_content_call_proposals.post_update.php b/modules/oe_theme_content_call_proposals/oe_theme_content_call_proposals.post_update.php
index 68cfab5a0..dae650384 100644
--- a/modules/oe_theme_content_call_proposals/oe_theme_content_call_proposals.post_update.php
+++ b/modules/oe_theme_content_call_proposals/oe_theme_content_call_proposals.post_update.php
@@ -5,7 +5,7 @@
* OpenEuropa theme content call for proposals post updates.
*/
-declare(strict_types = 1);
+declare(strict_types=1);
use Drupal\Core\Config\FileStorage;
use Drupal\Core\Entity\Entity\EntityViewDisplay;
diff --git a/modules/oe_theme_content_call_proposals/src/Plugin/ExtraField/Display/CallForProposalsLabelStatusExtraField.php b/modules/oe_theme_content_call_proposals/src/Plugin/ExtraField/Display/CallForProposalsLabelStatusExtraField.php
index f2feaab7d..b5ffc01fe 100644
--- a/modules/oe_theme_content_call_proposals/src/Plugin/ExtraField/Display/CallForProposalsLabelStatusExtraField.php
+++ b/modules/oe_theme_content_call_proposals/src/Plugin/ExtraField/Display/CallForProposalsLabelStatusExtraField.php
@@ -1,6 +1,6 @@
+
{% for item in _links %}
-
{{- item.label -}}
@@ -36,8 +36,5 @@
'size': 'fluid',
},
},
- 'extra_attributes': [{
- name: 'data-ecl-expandable-dropdown',
- }],
- 'extra_dropdown_classes': 'ecl-expandable-dropdown__content',
+ 'content': content|default([]),
} %}
diff --git a/tests/modules/oe_theme_js_test/oe_theme_js_test.module b/tests/modules/oe_theme_js_test/oe_theme_js_test.module
index 93f08b183..e6f69ece9 100644
--- a/tests/modules/oe_theme_js_test/oe_theme_js_test.module
+++ b/tests/modules/oe_theme_js_test/oe_theme_js_test.module
@@ -5,7 +5,7 @@
* Support module for Javascript related tests.
*/
-declare(strict_types = 1);
+declare(strict_types=1);
/**
* Implements hook_page_attachments().
diff --git a/tests/modules/oe_theme_js_test/src/Form/AjaxDropdownsTestForm.php b/tests/modules/oe_theme_js_test/src/Form/AjaxDropdownsTestForm.php
index ec5a04fec..c7bdfba86 100644
--- a/tests/modules/oe_theme_js_test/src/Form/AjaxDropdownsTestForm.php
+++ b/tests/modules/oe_theme_js_test/src/Form/AjaxDropdownsTestForm.php
@@ -1,6 +1,6 @@
markTestSkipped('Must be re-enabled before considering migration to ECL 4 as complete.');
$this->drupalGet('/oe_theme_js_test/ajax_dropdown');
// Verify that the first dropdown button is shown, and it's collapsed.
@@ -82,7 +81,7 @@ public function testEclAutoInit(): void {
$this->assertSession()->pageTextContains('Child link 0');
// We need to close the dropdown now. Clicking on the container will do.
- $this->getSession()->getPage()->find('css', '#dropdown-container')->click();
+ $this->getSession()->getPage()->find('css', 'button[data-ecl-label-expanded="Dropdown 0"]')->press();
// Add a new dropdown.
$this->getSession()->getPage()->pressButton('Add another');
@@ -100,27 +99,37 @@ public function testEclAutoInit(): void {
// Verify that the JS behaviours initialised ECL on the second dropdown.
$this->getSession()->getPage()->pressButton('Dropdown 1');
$this->assertSession()->pageTextContains('Child link 1');
+ // First dropdown wasn't closed.
+ $this->assertSession()->pageTextContains('Child link 0');
+ // Close the first dropdown.
+ $this->getSession()->getPage()->find('css', 'button[data-ecl-label-expanded="Dropdown 0"]')->press();
+ $this->assertSession()->pageTextNotContains('Child link 0');
+ $this->assertSession()->pageTextContains('Child link 1');
+ // Close the second dropdown.
+ $this->getSession()->getPage()->find('css', 'button[data-ecl-label-expanded="Dropdown 1"]')->press();
$this->assertSession()->pageTextNotContains('Child link 0');
+ $this->assertSession()->pageTextNotContains('Child link 1');
}
/**
* Tests that ECL multi select is rendered properly.
*/
public function testEclMultiSelect(): void {
- $this->markTestSkipped('Must be re-enabled before considering migration to ECL 4 as complete.');
$this->drupalGet('/oe_theme_js_test/multi_select');
+ // Assert select container.
+ $select_container = $this->assertSession()->elementExists('css', 'div.ecl-select__multiple div.ecl-select__container.ecl-select__container--m');
// Assert the default input is present and shows a default placeholder.
- $select_input = $this->getSession()->getPage()->find('css', 'button.ecl-select__multiple-toggle');
+ $select_input = $select_container->find('css', 'button.ecl-select__multiple-toggle');
$this->assertTrue($this->getSession()->getDriver()->isVisible($select_input->getXpath()));
$this->assertEquals('Select', $select_input->getText());
// Assert the select dropdown is hidden.
- $select_dropdown = $this->getSession()->getPage()->find('css', 'div.ecl-select__multiple-dropdown');
+ $select_dropdown = $this->getSession()->getPage()->find('css', 'div.ecl-select__multiple-dropdown.ecl-select__container.ecl-select__container--m');
Assert::assertFalse($this->getSession()->getDriver()->isVisible($select_dropdown->getXpath()));
// Click the input and assert the dropdown is now visible.
$select_input->click();
- $select_dropdown = $this->getSession()->getPage()->find('css', 'div.ecl-select__multiple-dropdown');
+ $select_dropdown = $this->getSession()->getPage()->find('css', 'div.ecl-select__multiple-dropdown.ecl-select__container.ecl-select__container--m');
$this->assertTrue($this->getSession()->getDriver()->isVisible($select_dropdown->getXpath()));
// Assert all options are visible.
@@ -131,7 +140,7 @@ public function testEclMultiSelect(): void {
'Two point two',
'Three',
];
- $option_elements = $this->getSession()->getPage()->findAll('css', 'div.ecl-checkbox');
+ $option_elements = $select_dropdown->findAll('css', 'div.ecl-checkbox');
$this->assertEquals(count($options), count($option_elements));
foreach ($options as $index => $option) {
$this->assertEquals($option, $option_elements[$index]->getText());
@@ -142,7 +151,6 @@ public function testEclMultiSelect(): void {
* Tests that ECL datepicker is rendered properly.
*/
public function testEclDatePicker(): void {
- $this->markTestSkipped('Must be re-enabled before considering migration to ECL 4 as complete.');
$this->drupalGet('/oe_theme_js_test/datepicker');
// Assert we have two hidden datepicker elements on the page.
@@ -181,13 +189,13 @@ public function testEclDatePicker(): void {
// Assert days are present.
$headers = $rows['0']->findAll('css', 'th');
$expected = [
- 'Mon',
- 'Tue',
- 'Wed',
- 'Thu',
- 'Fri',
- 'Sat',
- 'Sun',
+ 'MO',
+ 'TU',
+ 'WE',
+ 'TH',
+ 'FR',
+ 'SA',
+ 'SU',
];
foreach ($headers as $key => $column) {
@@ -221,7 +229,6 @@ public function testEclDatePicker(): void {
* Tests that contextual navigation pattern is rendered properly.
*/
public function testContextNavPattern(): void {
- $this->markTestSkipped('Must be re-enabled before considering migration to ECL 4 as complete.');
$this->drupalGet('/oe_theme_js_test/ui_patterns/context_nav');
$this->assertCount(2, $this->getSession()->getPage()->findAll('css', '[data-ecl-contextual-navigation-list]'));
$this->assertCount(1, $this->getSession()->getPage()->findAll('css', '[data-ecl-contextual-navigation-more]'));
diff --git a/tests/src/Kernel/AbstractKernelTestBase.php b/tests/src/Kernel/AbstractKernelTestBase.php
index fce3b2322..37ad74f51 100644
--- a/tests/src/Kernel/AbstractKernelTestBase.php
+++ b/tests/src/Kernel/AbstractKernelTestBase.php
@@ -1,6 +1,6 @@
'
-#- array:
-# '#type': select
-# '#title': Select element
-# '#multiple': true
-# '#options':
-# 1: One
-# 2: Two
-# 3: Three
-# assert:
-# count:
-# 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m': 1
-# 'select.ecl-select': 1
-# 'div.ecl-select__icon': 1
-# 'select[data-ecl-select-multiple]': 1
-# 'svg.ecl-icon.ecl-icon--s.ecl-icon--rotate-180.ecl-button__icon': 1
-# equals:
-# 'div.ecl-form-group label.ecl-form-label': 'Select element'
-# 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select option[value="1"]': 'One'
-# 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select option[value="2"]': 'Two'
-# 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select option[value="3"]': 'Three'
-# 'div.ecl-select__icon button.ecl-button--icon-only svg': ''
-#- array:
-# '#type': select
-# '#title': Select element
-# '#options':
-# 1: One
-# 'Two':
-# '2.1': 'Two point one'
-# '2.2': 'Two point two'
-# 3: Three
-# assert:
-# count:
-# 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m': 1
-# 'select.ecl-select': 1
-# 'div.ecl-select__icon': 1
-# 'select[data-ecl-select-multiple]': 0
-# 'svg.ecl-icon.ecl-icon--s.ecl-icon--rotate-180.ecl-button__icon': 1
-# equals:
-# 'div.ecl-form-group label.ecl-form-label': 'Select element'
-# 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select option[value="1"]': 'One'
-# 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select optgroup[label="Two"] option[value="2.1"]': 'Two point one'
-# 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select optgroup[label="Two"] option[value="2.2"]': 'Two point two'
-# 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select option[value="3"]': 'Three'
-# 'div.ecl-select__icon button.ecl-button--icon-only svg': ''
-#- array:
-# '#type': select
-# '#title': Select element
-# '#multiple': true
-# '#options':
-# 1: One
-# 'Two':
-# '2.1': 'Two point one'
-# '2.2': 'Two point two'
-# 3: Three
-# assert:
-# count:
-# 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m': 1
-# 'select.ecl-select': 1
-# 'div.ecl-select__icon': 1
-# 'select[data-ecl-select-multiple]': 1
-# 'svg.ecl-icon.ecl-icon--s.ecl-icon--rotate-180.ecl-button__icon': 1
-# equals:
-# 'div.ecl-form-group label.ecl-form-label': 'Select element'
-# 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select option[value="1"]': 'One'
-# 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select optgroup[label="Two"] option[value="2.1"]': 'Two point one'
-# 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select optgroup[label="Two"] option[value="2.2"]': 'Two point two'
-# 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select option[value="3"]': 'Three'
-# 'div.ecl-select__icon button.ecl-button--icon-only svg': ''
+- array:
+ '#type': select
+ '#title': Select element
+ '#options':
+ 1: One
+ 2: Two
+ 3: Three
+ assert:
+ count:
+ 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m': 1
+ 'select.ecl-select': 1
+ 'div.ecl-select__icon': 1
+ 'select[data-ecl-select-multiple]': 0
+ 'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-180.ecl-button__icon': 1
+ equals:
+ 'div.ecl-form-group label.ecl-form-label': 'Select element'
+ 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select option[value="1"]': 'One'
+ 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select option[value="2"]': 'Two'
+ 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select option[value="3"]': 'Three'
+ 'div.ecl-select__icon button.ecl-button--icon-only svg': ''
+- array:
+ '#type': select
+ '#title': Select element
+ '#multiple': true
+ '#options':
+ 1: One
+ 2: Two
+ 3: Three
+ assert:
+ count:
+ 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m': 1
+ 'select.ecl-select': 1
+ 'div.ecl-select__icon': 1
+ 'select[data-ecl-select-multiple]': 1
+ 'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-180.ecl-button__icon': 1
+ equals:
+ 'div.ecl-form-group label.ecl-form-label': 'Select element'
+ 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select option[value="1"]': 'One'
+ 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select option[value="2"]': 'Two'
+ 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select option[value="3"]': 'Three'
+ 'div.ecl-select__icon button.ecl-button--icon-only svg': ''
+- array:
+ '#type': select
+ '#title': Select element
+ '#options':
+ 1: One
+ 'Two':
+ '2.1': 'Two point one'
+ '2.2': 'Two point two'
+ 3: Three
+ assert:
+ count:
+ 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m': 1
+ 'select.ecl-select': 1
+ 'div.ecl-select__icon': 1
+ 'select[data-ecl-select-multiple]': 0
+ 'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-180.ecl-button__icon': 1
+ equals:
+ 'div.ecl-form-group label.ecl-form-label': 'Select element'
+ 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select option[value="1"]': 'One'
+ 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select optgroup[label="Two"] option[value="2.1"]': 'Two point one'
+ 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select optgroup[label="Two"] option[value="2.2"]': 'Two point two'
+ 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select option[value="3"]': 'Three'
+ 'div.ecl-select__icon button.ecl-button--icon-only svg': ''
+- array:
+ '#type': select
+ '#title': Select element
+ '#multiple': true
+ '#options':
+ 1: One
+ 'Two':
+ '2.1': 'Two point one'
+ '2.2': 'Two point two'
+ 3: Three
+ assert:
+ count:
+ 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m': 1
+ 'select.ecl-select': 1
+ 'div.ecl-select__icon': 1
+ 'select[data-ecl-select-multiple]': 1
+ 'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-180.ecl-button__icon': 1
+ equals:
+ 'div.ecl-form-group label.ecl-form-label': 'Select element'
+ 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select option[value="1"]': 'One'
+ 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select optgroup[label="Two"] option[value="2.1"]': 'Two point one'
+ 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select optgroup[label="Two"] option[value="2.2"]': 'Two point two'
+ 'div.ecl-form-group div.ecl-select__container.ecl-select__container--m select.ecl-select option[value="3"]': 'Three'
+ 'div.ecl-select__icon button.ecl-button--icon-only svg': ''
- array:
'#type': radios
'#title': Radios
@@ -1892,14 +1892,14 @@
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
+ '.ecl-expandable__content a[href="http://example.com/1"]': 1
+ '.ecl-expandable__content a[href="http://example.com/2"]': 1
+ '.ecl-expandable__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"
+ '.ecl-expandable__content .ecl-unordered-list .ecl-unordered-list__item:nth-child(1) a': "Link 1"
+ '.ecl-expandable__content .ecl-unordered-list .ecl-unordered-list__item:nth-child(2) a': "Link 2"
+ '.ecl-expandable__content .ecl-unordered-list .ecl-unordered-list__item:nth-child(3) a': "Link 3"
- array:
'#type': pattern
'#id': field
@@ -2756,8 +2756,8 @@
path: "https://european-union.europa.eu/index_en"
highlighted: true
expandable:
- content:
- '#markup': "
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non enim iam stirpis bonum quaeret, sed animalis;A mene tu?
"
+ content:
+ '#markup': "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non enim iam stirpis bonum quaeret, sed animalis;A mene tu?
"
assertions:
count:
'article.ecl-featured-item.ecl-featured-item--highlight': 1
diff --git a/tests/src/PatternAssertions/BasePatternAssert.php b/tests/src/PatternAssertions/BasePatternAssert.php
index f024991e9..ff709e158 100644
--- a/tests/src/PatternAssertions/BasePatternAssert.php
+++ b/tests/src/PatternAssertions/BasePatternAssert.php
@@ -1,6 +1,6 @@