EWPP-1354: Replace the ecl-editor class.

openeuropa · Jul 29, 2021 · e29de52 · e29de52
1 parent 55865bb
commit e29de52
Show file tree

Hide file tree

Showing 32 changed files with 65 additions and 74 deletions.
diff --git a/modules/oe_theme_content_event/templates/oe-theme-content-event-summary.html.twig b/modules/oe_theme_content_event/templates/oe-theme-content-event-summary.html.twig
@@ -5,7 +5,7 @@
  */
 #}
 {% if text is not empty %}
-  <div class="ecl-editor">
+  <div class="ecl">
     {{ text }}
   </div>
 {% endif %}
diff --git a/oe_theme.info.yml b/oe_theme.info.yml
@@ -7,7 +7,6 @@ core: 8.x
 base theme: stable
 
 libraries:
-  - oe_theme/editor
   - oe_theme/external_svg
   - oe_theme/print
 

diff --git a/oe_theme.libraries.yml b/oe_theme.libraries.yml
@@ -1,9 +1,10 @@
-component_library_ec:
+./vendor/bin/run toolkit:build-devcomponent_library_ec:
   css:
     theme:
       dist/preset-reset/styles/optional/ecl-reset.css: { media: screen }
       dist/ec/styles/ecl-ec.css: { media: screen }
       dist/ec/styles/ecl-ec-print.css: { media: print }
+      dist/ec/styles/optional/ecl-ec-default.css: { media: screen }
       css/style-ec.css: { media: screen }
   js:
     dist/js/moment.min.js: { minified: true }
@@ -18,6 +19,7 @@ component_library_eu:
       dist/preset-reset/styles/optional/ecl-reset.css: { media: screen }
       dist/eu/styles/ecl-eu.css: { media: screen }
       dist/eu/styles/ecl-eu-print.css: { media: print }
+      dist/eu/styles/optional/ecl-eu-default.css: { media: screen }
       css/style-eu.css: { media: screen }
   js:
     dist/js/moment.min.js: { minified: true }
@@ -26,11 +28,6 @@ component_library_eu:
   dependencies:
     - core/drupal
 
-editor:
-  css:
-    theme:
-      dist/styles/ecl-ec-preset-editor.css: {}
-
 external_svg:
   js:
     dist/js/svg4everybody.min.js: { minified: true }

diff --git a/package.json b/package.json
@@ -55,9 +55,6 @@
     "@ecl/preset-reset": "3.0.0-beta.2",
     "@ecl/preset-ec": "3.0.0-beta.2",
     "@ecl/preset-eu": "3.0.0-beta.2",
-    "@ecl/ec-component-form-help-block": "2.37.0",
-    "@ecl/eu-component-form-help-block": "2.37.0",
-    "@ecl/ec-preset-editor": "2.37.0",
     "@ecl/theme-ec": "3.0.0-beta.2",
     "@ecl/theme-eu": "3.0.0-beta.2",
     "@ecl/vanilla-utility-background": "3.0.0-beta.2",

diff --git a/sass/components/_global.scss b/sass/components/_global.scss
@@ -17,7 +17,7 @@ a {
   color: map.get(theme.$color, 'blue');
 }
 
-.ecl-editor {
+.ecl {
   p:first-child {
     margin-top: 0;
   }

diff --git a/sass/components/_wysiwyg.scss b/sass/components/_wysiwyg.scss
@@ -1,6 +1,6 @@
 @use "sass:map";
 @use '@ecl/theme-dev/theme';
-.ecl-editor {
+.ecl {
   article,
   .ecl-file {
     margin-top: map.get(theme.$spacing, 'xs');

diff --git a/templates/field/description-list.html.twig b/templates/field/description-list.html.twig
@@ -12,7 +12,7 @@
 {% if items %}
   {% for _item in items %}
     {% set _description %}
-      <div class="ecl-editor">{{ _item.description }}</div>
+      <div class="ecl">{{ _item.description }}</div>
     {% endset %}
     {% set _items = _items|merge([{
       term: _item.term,

diff --git a/templates/field/field--node--body--oe-project--full.html.twig b/templates/field/field--node--body--oe-project--full.html.twig
@@ -7,7 +7,7 @@
  */
 #}
 {% for item in items %}
-<div class="ecl-editor ecl-u-mb-l">
+<div class="ecl ecl-u-mb-l">
   {{ item.content }}
 </div>
 {% endfor %}
diff --git a/templates/field/field--node--extra-field-oe-consultation-closed-status-text.html.twig b/templates/field/field--node--extra-field-oe-consultation-closed-status-text.html.twig
@@ -6,6 +6,6 @@
  * @see ./templates/field/field--bare.html.twig
  */
 #}
-<div class="ecl-editor">
+<div class="ecl">
   {%- include 'field--bare.html.twig' -%}
 </div>
diff --git a/templates/field/field--node--oe-person-biography-intro--oe-person--full.html.twig b/templates/field/field--node--oe-person-biography-intro--oe-person--full.html.twig
@@ -7,7 +7,7 @@
  */
 #}
 {% for item in items %}
-  <div class="ecl-editor ecl-u-mb-m">
+  <div class="ecl ecl-u-mb-m">
     {{ item.content }}
   </div>
 {% endfor %}
diff --git a/templates/field/field--node--oe-person-interests-intro--oe-person--full.html.twig b/templates/field/field--node--oe-person-interests-intro--oe-person--full.html.twig
@@ -7,7 +7,7 @@
  */
 #}
 {% for item in items %}
-  <div class="ecl-u-mb-l ecl-editor">
+  <div class="ecl-u-mb-l ecl">
     {{ item.content }}
   </div>
 {% endfor %}
diff --git a/templates/field/field--node--oe-person-transparency-intro--oe-person--full.html.twig b/templates/field/field--node--oe-person-transparency-intro--oe-person--full.html.twig
@@ -7,7 +7,7 @@
  */
 #}
 {% for item in items %}
-  <div class="ecl-editor ecl-u-mb-m">
+  <div class="ecl ecl-u-mb-m">
     {{ item.content }}
   </div>
 {% endfor %}
diff --git a/templates/field/field--oe-person-job--oe-description--full.html.twig b/templates/field/field--oe-person-job--oe-description--full.html.twig
@@ -7,7 +7,7 @@
  */
 #}
 {% for item in items %}
-  <div class="ecl-u-mb-l ecl-editor">
+  <div class="ecl-u-mb-l ecl">
     {{ item.content }}
   </div>
 {% endfor %}
diff --git a/templates/field/field--oe-person-job--oe-description.html.twig b/templates/field/field--oe-person-job--oe-description.html.twig
@@ -7,7 +7,7 @@
  */
 #}
 {% for item in items %}
-  <div class="ecl-editor">
+  <div class="ecl">
     {{ item.content }}
   </div>
 {% endfor %}
diff --git a/templates/field/field--text-long.html.twig b/templates/field/field--text-long.html.twig
@@ -17,7 +17,7 @@
     %}
     <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
   {% endif %}
-  <div class="ecl-editor">
+  <div class="ecl">
     {%- include 'field--bare.html.twig' -%}
   </div>
 {% endspaceless %}
diff --git a/templates/patterns/text_featured_media/pattern-text-featured-media.html.twig b/templates/patterns/text_featured_media/pattern-text-featured-media.html.twig
@@ -35,7 +35,7 @@
       </div>
     {% endif %}
     {% if text %}
-      <div class="{{ image or video ? ' ecl-col-m-6' : 'ecl-col-12' }} ecl-editor">{{ text }}</div>
+      <div class="{{ image or video ? ' ecl-col-m-6' : 'ecl-col-12' }} ecl">{{ text }}</div>
     {% endif %}
   </div>
 {% endif %}
diff --git a/tests/Functional/ConfigurationTest.php b/tests/Functional/ConfigurationTest.php
@@ -49,6 +49,7 @@ public function testDefaultLibraryLoading(): void {
       $this->assertLinkContainsHref('/oe_theme/dist/preset-reset/styles/optional/ecl-reset.css');
       $this->assertLinkContainsHref('/oe_theme/dist/ec/styles/ecl-ec.css');
       $this->assertLinkContainsHref('/oe_theme/dist/ec/styles/ecl-ec-print.css');
+      $this->assertLinkContainsHref('/oe_theme/dist/ec/styles/optional/ecl-ec-default.css');
       $this->assertLinkContainsHref('/oe_theme/css/style-ec.css');
 
       $this->assertScriptContainsSrc('/oe_theme/dist/js/moment.min.js');
@@ -58,12 +59,10 @@ public function testDefaultLibraryLoading(): void {
       // Assert that we do not load the EU component library by default.
       $this->assertLinkNotContainsHref('/oe_theme/dist/eu/styles/ecl-eu.css');
       $this->assertLinkNotContainsHref('/oe_theme/dist/eu/styles/ecl-eu-print.css');
+      $this->assertLinkNotContainsHref('/oe_theme/dist/eu/styles/optional/ecl-eu-default.css');
       $this->assertLinkNotContainsHref('/oe_theme/css/style-eu.css');
 
       $this->assertScriptNotContainsSrc('/oe_theme/dist/eu/scripts/ecl-eu.js');
-
-      // Assert that the ECL Editor preset is always loaded.
-      $this->assertLinkContainsHref('/oe_theme/dist/styles/ecl-ec-preset-editor.css');
     }
   }
 
@@ -101,6 +100,7 @@ public function testChangeComponentLibrary(): void {
       $this->assertLinkContainsHref('/oe_theme/dist/preset-reset/styles/optional/ecl-reset.css');
       $this->assertLinkContainsHref('/oe_theme/dist/eu/styles/ecl-eu.css');
       $this->assertLinkContainsHref('/oe_theme/dist/eu/styles/ecl-eu-print.css');
+      $this->assertLinkContainsHref('/oe_theme/dist/eu/styles/optional/ecl-eu-default.css');
       $this->assertLinkContainsHref('/oe_theme/css/style-eu.css');
 
       $this->assertScriptContainsSrc('/oe_theme/dist/js/moment.min.js');
@@ -113,13 +113,11 @@ public function testChangeComponentLibrary(): void {
       // Assert that we do not load the EC component library.
       $this->assertLinkNotContainsHref('/oe_theme/dist/ec/styles/ecl-ec.css');
       $this->assertLinkNotContainsHref('/oe_theme/dist/ec/styles/ecl-ec-print.css');
+      $this->assertLinkNotContainsHref('/oe_theme/dist/ec/styles/optional/ecl-ec-default.css');
       $this->assertLinkNotContainsHref('/oe_theme/css/style-ec.css');
 
       $this->assertScriptNotContainsSrc('/oe_theme/dist/ec/scripts/ecl-ec.js');
 
-      // Assert that the ECL Editor preset is always loaded.
-      $this->assertLinkContainsHref('/oe_theme/dist/styles/ecl-ec-preset-editor.css');
-
       // Visit theme administration page.
       $this->drupalGet('/admin/appearance/settings/' . $active_theme);
 
@@ -133,6 +131,7 @@ public function testChangeComponentLibrary(): void {
       // Assert that we load the EC component library by default.
       $this->assertLinkContainsHref('/oe_theme/dist/ec/styles/ecl-ec.css');
       $this->assertLinkContainsHref('/oe_theme/dist/ec/styles/ecl-ec-print.css');
+      $this->assertLinkContainsHref('/oe_theme/dist/ec/styles/optional/ecl-ec-default.css');
       $this->assertLinkContainsHref('/oe_theme/css/style-ec.css');
 
       $this->assertScriptContainsSrc('/oe_theme/dist/ec/scripts/ecl-ec.js');
@@ -145,12 +144,11 @@ public function testChangeComponentLibrary(): void {
       // Assert that we do not load the EU component library by default.
       $this->assertLinkNotContainsHref('/oe_theme/dist/eu/styles/ecl-eu.css');
       $this->assertLinkNotContainsHref('/oe_theme/dist/eu/styles/ecl-eu-print.css');
+      $this->assertLinkNotContainsHref('/oe_theme/dist/eu/styles/optional/ecl-eu-default.css');
       $this->assertLinkNotContainsHref('/oe_theme/css/style-eu.css');
 
       $this->assertScriptNotContainsSrc('/oe_theme/dist/eu/scripts/ecl-eu.js');
 
-      // Assert that the ECL Editor preset is always loaded.
-      $this->assertLinkContainsHref('/oe_theme/dist/styles/ecl-ec-preset-editor.css');
     }
   }
 

diff --git a/tests/Functional/ContentCallForProposalsRenderTest.php b/tests/Functional/ContentCallForProposalsRenderTest.php
@@ -349,7 +349,7 @@ public function testProposalRendering(): void {
     $content_items = $content->findAll('xpath', '/div');
     $this->assertCount(2, $content_items);
     $this->assertContentHeader($content_items[1], 'Description', 'description');
-    $content_second_group = $content_items[1]->find('css', '.ecl-editor p');
+    $content_second_group = $content_items[1]->find('css', '.ecl p');
     $this->assertEquals('Call for proposals body', $content_second_group->getText());
 
     // Assert Documents field.

diff --git a/tests/Functional/ContentCallForTendersRenderTest.php b/tests/Functional/ContentCallForTendersRenderTest.php
@@ -271,7 +271,7 @@ public function testTenderRendering(): void {
     $content_items = $content->findAll('xpath', '/div');
     $this->assertCount(2, $content_items);
     $this->assertContentHeader($content_items[1], 'Description', 'description');
-    $content_second_group = $content_items[1]->find('css', '.ecl-editor p');
+    $content_second_group = $content_items[1]->find('css', '.ecl p');
     $this->assertEquals('Call for tenders body', $content_second_group->getText());
 
     // Assert Documents field.

diff --git a/tests/Functional/ContentConsultationRenderTest.php b/tests/Functional/ContentConsultationRenderTest.php
@@ -202,7 +202,7 @@ public function testConsultationRendering(): void {
     $field_list_assert->assertPattern($details_expected_values, $details_html);
 
     // Assert 2nd inpage navigation item content.
-    $content_second_group = $content_items[1]->find('css', '.ecl-editor p');
+    $content_second_group = $content_items[1]->find('css', '.ecl p');
     $this->assertEquals('Target audience text', $content_second_group->getText());
 
     // Set Consultation aim and assert navigation and content is updated.
@@ -220,7 +220,7 @@ public function testConsultationRendering(): void {
     $inpage_nav_assert->assertPattern($inpage_nav_expected_values, $navigation->getOuterHtml());
     $content_items = $content->findAll('xpath', '/div');
     $this->assertCount(3, $content_items);
-    $content_second_group = $content_items[2]->find('css', '.ecl-editor p');
+    $content_second_group = $content_items[2]->find('css', '.ecl p');
     $this->assertEquals('Consultation aim text', $content_second_group->getText());
 
     // Set Consultation guidelines and assert navigation and content is updated.
@@ -251,7 +251,7 @@ public function testConsultationRendering(): void {
     $inpage_nav_assert->assertPattern($inpage_nav_expected_values, $navigation->getOuterHtml());
     $content_items = $content->findAll('xpath', '/div');
     $this->assertCount(4, $content_items);
-    $content_second_group = $content_items[3]->find('css', '.ecl-editor p');
+    $content_second_group = $content_items[3]->find('css', '.ecl p');
     $this->assertEquals('Consultation guidelines text', $content_second_group->getText());
     $this->assertElementNotPresent('.ecl-link.ecl-link--cta');
 
@@ -290,7 +290,7 @@ public function testConsultationRendering(): void {
     $inpage_nav_assert->assertPattern($inpage_nav_expected_values, $navigation->getOuterHtml());
     $content_items = $content->findAll('xpath', '/div');
     $this->assertCount(5, $content_items);
-    $content_second_group = $content_items[4]->find('css', '.ecl-editor p');
+    $content_second_group = $content_items[4]->find('css', '.ecl p');
     $this->assertEquals('Consultation outcome text', $content_second_group->getText());
     $this->assertMediaDocumentDefaultRender($content_items[4], 'consultation_document', 'English', '2.96 KB - PDF', "sample_consultation_document.pdf", 'Download');
 
@@ -383,7 +383,7 @@ public function testConsultationRendering(): void {
     $inpage_nav_assert->assertPattern($inpage_nav_expected_values, $navigation->getOuterHtml());
     $content_items = $content->findAll('xpath', '/div');
     $this->assertCount(7, $content_items);
-    $content_second_group = $content_items[6]->find('css', '.ecl-editor p');
+    $content_second_group = $content_items[6]->find('css', '.ecl p');
     $this->assertEquals('Additional information text', $content_second_group->getText());
 
     // Set legal notice and assert content is updated.
@@ -430,7 +430,7 @@ public function testConsultationRendering(): void {
     $inpage_nav_assert->assertPattern($inpage_nav_expected_values, $navigation->getOuterHtml());
     $content_items = $content->findAll('xpath', '/div');
     $this->assertCount(8, $content_items);
-    $content_second_group = $content_items[7]->find('css', '.ecl-editor p');
+    $content_second_group = $content_items[7]->find('css', '.ecl p');
     $this->assertEquals('Legal info text', $content_second_group->getText());
 
     // Set contact and assert content is updated.
@@ -544,7 +544,7 @@ public function testConsultationRendering(): void {
     ];
     $page_header_assert->assertPattern($page_header_expected_values, $page_header->getOuterHtml());
 
-    $content_second_group = $content_items[3]->find('css', '.ecl-editor');
+    $content_second_group = $content_items[3]->find('css', '.ecl');
     $this->assertEquals('Consultation guidelines text', $content_second_group->getText());
     $this->assertNotContains('The response period for this consultation has ended. Thank you for your input.', $content_second_group->getText());
 
@@ -582,7 +582,7 @@ public function testConsultationRendering(): void {
 
     // Assert 4th inpage navigation item content is updated.
     $this->assertContentHeader($content_items[3], 'Respond to the consultation', 'respond-to-the-consultation');
-    $content_second_group = $content_items[3]->find('css', '.ecl-editor');
+    $content_second_group = $content_items[3]->find('css', '.ecl');
     // Assert default value for closed status text.
     $this->assertEquals('The response period for this consultation has ended. Thank you for your input.', $content_second_group->getText());
     $this->assertElementNotPresent('.ecl-link.ecl-link--cta');

diff --git a/tests/Functional/ContentEventRenderTest.php b/tests/Functional/ContentEventRenderTest.php
@@ -507,7 +507,7 @@ public function testEventRendering(): void {
     $this->cronRun();
     $this->drupalGet($node->toUrl());
 
-    $description_summary = $this->assertSession()->elementExists('css', '.ecl-editor', $details_content);
+    $description_summary = $this->assertSession()->elementExists('css', '.ecl', $details_content);
     $this->assertEquals('Event report summary', $description_summary->getText());
 
     $text_featured_expected_values['title'] = 'Report';

diff --git a/tests/Functional/ContentNewsRenderTest.php b/tests/Functional/ContentNewsRenderTest.php
@@ -137,7 +137,7 @@ public function testNewsRendering(): void {
     $field_list_assert->assertPattern($details_expected_values, $details_html);
 
     // Assert Body field.
-    $body = $this->assertSession()->elementExists('css', 'article[role=article] .ecl-editor');
+    $body = $this->assertSession()->elementExists('css', 'article[role=article] .ecl');
     $this->assertEquals('News body', $body->getText());
 
     // Assert news contacts.

diff --git a/tests/Functional/ContentOrganisationRenderTest.php b/tests/Functional/ContentOrganisationRenderTest.php
@@ -192,7 +192,7 @@ public function testOrganisationRendering(): void {
     $this->assertEquals('Overview Description 2', $overview_descriptions[1]->getText());
 
     // Assert values of the second group.
-    $body = $content_items[1]->findAll('css', '.ecl-editor');
+    $body = $content_items[1]->findAll('css', '.ecl');
     $this->assertCount(1, $body);
     $this->assertEquals('My body text', $body[0]->getText());