Merge pull request #144 from openeuropa/OEL-1618

OEL-1618: Upgrade BCL to 0.23.0.

composer.json

@@ -11,7 +11,7 @@
         "drupal/core": "^9.2",
         "drupal/twig_field_value": "^2.0",
         "openeuropa/composer-artifacts": "^1.0.0-alpha1",
-        "openeuropa/oe_bootstrap_theme": "1.0.0-beta2"
+        "openeuropa/oe_bootstrap_theme": "0.1.202206231430"
     },
     "require-dev": {
         "composer/installers": "^1.11",

modules/oe_whitelabel_list_pages/tests/src/Functional/ListPagesTest.php

@@ -54,7 +54,7 @@ public function testListPageRendering(): void {
 
     // Assert offcanvas.
     $offcanvas = $left_column->find('css', 'div.bcl-offcanvas');
-    $title = $offcanvas->find('css', 'h4.offcanvas-title');
+    $title = $offcanvas->find('css', 'h3.offcanvas-title');
     $this->assertSame('Filter options', $title->getText());
     $offcanvas->hasField('Title');
     $offcanvas->hasButton('Search');
@@ -166,7 +166,7 @@ protected function assertPager(int $expected_count, ElementInterface $container)
    */
   protected function assertListing(int $expected_count, ElementInterface $container): void {
     $listing = $container->find('css', 'div.bcl-listing');
-    $this->assertSession()->elementsCount('css', 'div.listing-item', $expected_count, $listing);
+    $this->assertSession()->elementsCount('css', 'article.listing-item', $expected_count, $listing);
   }
 
   /**

modules/oe_whitelabel_paragraphs/tests/src/Kernel/Paragraphs/ContentRowTest.php

@@ -147,8 +147,8 @@ public function testWithInpageNavigationRendering(): void {
     $left = $crawler->filter('div.col-md-3.d-none.d-md-block');
     $nav = $left->filter('nav.bcl-inpage-navigation');
     $this->assertCount(1, $nav);
-    $h5 = $nav->filter('h5');
-    $this->assertSame('Page content', $h5->text());
+    $h3 = $nav->filter('h3');
+    $this->assertSame('Page content', $h3->text());
     $ul = $left->filter('ul.nav.nav-pills.flex-column');
     $this->assertCount(1, $ul);
     $links = $ul->filter('li.nav-item a.nav-link');
@@ -159,17 +159,17 @@ public function testWithInpageNavigationRendering(): void {
     // Assert the paragraphs where added into the right side column.
     $content = $crawler->filter('div.col-md-9');
     $this->assertCount(1, $content);
-    $rich_text_title = $content->filter('h4.fw-bold.mb-4');
+    $rich_text_title = $content->filter('h2.bcl-heading')->eq(0);
     $this->assertSame('Title rich text test 1', trim($rich_text_title->text()));
-    $links_block_title = $content->filter('h2.fw-bold.pb-3.mb-3.border-bottom');
+    $links_block_title = $content->filter('h2.bcl-heading')->eq(1);
     $this->assertSame('Links block test', $links_block_title->text());
     $facts_figures = $content->filter('div.bcl-fact-figures--default');
-    $this->assertStringContainsString('Facts and Figures test', $facts_figures->filter('h2.fw-bold')->text());
+    $this->assertStringContainsString('Facts and Figures test', $facts_figures->filter('h2.bcl-heading')->text());
     $blockquote_blockquote = $content->filter('blockquote.blockquote');
     $this->assertStringContainsString('Maecenas id urna eleifend', $blockquote_blockquote->text());
     $blockquote_footer = $content->filter('figcaption.blockquote-footer');
     $this->assertSame('Quote 1', trim($blockquote_footer->text()));
-    $social_media_title = $content->filter('h2.fw-bold.pb-3.mb-3.border-bottom')->eq(1);
+    $social_media_title = $content->filter('h2.bcl-heading')->eq(3);
     $this->assertStringContainsString('Social media block', $social_media_title->text());
     $accordion_items = $content->filter('.accordion-item');
     $this->assertStringContainsString('Accordion item 1', $accordion_items->eq(0)->text());

modules/oe_whitelabel_paragraphs/tests/src/Kernel/Paragraphs/DescriptionListTest.php

@@ -69,12 +69,12 @@ public function testRendering(): void {
     $html = $this->renderParagraph($paragraph);
     $crawler = new Crawler($html);
 
-    $this->assertCount(1, $crawler->filter('h4'));
+    $this->assertCount(1, $crawler->filter('h2.bcl-heading'));
     $this->assertCount(1, $crawler->filter('dl.d-md-grid.grid-3-9'));
     $this->assertCount(2, $crawler->filter('dd'));
     $this->assertCount(2, $crawler->filter('dt'));
 
-    $title = $crawler->filter('h4.fw-bold.mb-4');
+    $title = $crawler->filter('h2.bcl-heading');
     $this->assertEquals('Description list paragraph', $title->text());
 
     $term_1 = $crawler->filter('dl > div:nth-child(1) > dt');
@@ -100,7 +100,7 @@ public function testRendering(): void {
     $html = $this->renderParagraph($paragraph);
     $crawler = new Crawler($html);
 
-    $title = $crawler->filter('h4.fw-bold.mb-4');
+    $title = $crawler->filter('h2.bcl-heading');
     $this->assertEquals('Description list paragraph', $title->text());
 
     $term_1 = $crawler->filter('dl > dt:nth-child(1)');

modules/oe_whitelabel_paragraphs/tests/src/Kernel/Paragraphs/FactsFiguresTest.php

@@ -80,11 +80,11 @@ public function testRendering(): void {
     $crawler = new Crawler($html);
 
     $this->assertCount(1, $crawler->filter('div.bcl-fact-figures.bcl-fact-figures--default'));
-    $this->assertCount(1, $crawler->filter('h2.fw-bold'));
+    $this->assertCount(1, $crawler->filter('h2.bcl-heading'));
     $this->assertCount(1, $crawler->filter('div.row-cols-md-3.row'));
     $this->assertCount(6, $crawler->filter('svg.bi.icon--l'));
-    $this->assertCount(6, $crawler->filter('h4.fw-bold'));
-    $this->assertCount(6, $crawler->filter('h5.fw-bold'));
+    $this->assertCount(6, $crawler->filter('div.fs-3'));
+    $this->assertCount(6, $crawler->filter('div.fs-5'));
     $this->assertCount(6, $crawler->filter('div.col'));
 
     $link = $crawler->filter('a[href="https://www.readmore.com"]');
@@ -93,12 +93,12 @@ public function testRendering(): void {
       $link->html()
     );
 
-    $title_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(1) > h4.text-capitalize.fw-bold');
+    $title_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(1) > div.fs-3');
     $this->assertStringContainsString(
       '1529 JIRA Ticket',
       $title_fact->html()
     );
-    $subtitle_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(1) >  h5.fw-bold');
+    $subtitle_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(1) >  div.fs-5');
     $this->assertStringContainsString(
       'Jira Tickets',
       $subtitle_fact->html()
@@ -109,12 +109,12 @@ public function testRendering(): void {
       $description_fact->html()
     );
 
-    $title_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(2) > h4.text-capitalize.fw-bold');
+    $title_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(2) > div.fs-3');
     $this->assertStringContainsString(
       '337 Features',
       $title_fact->html()
     );
-    $subtitle_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(2) >  h5.fw-bold');
+    $subtitle_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(2) >  div.fs-5');
     $this->assertStringContainsString(
       'Feature tickets',
       $subtitle_fact->html()
@@ -125,12 +125,12 @@ public function testRendering(): void {
       $description_fact->html()
     );
 
-    $title_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(3) > h4.text-capitalize.fw-bold');
+    $title_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(3) > div.fs-3');
     $this->assertStringContainsString(
       '107 Tests',
       $title_fact->html()
     );
-    $subtitle_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(3) >  h5.fw-bold');
+    $subtitle_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(3) >  div.fs-5');
     $this->assertStringContainsString(
       'Test tickets',
       $subtitle_fact->html()
@@ -141,12 +141,12 @@ public function testRendering(): void {
       $description_fact->html()
     );
 
-    $title_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(4) > h4.text-capitalize.fw-bold');
+    $title_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(4) > div.fs-3');
     $this->assertStringContainsString(
       '5670 Variants',
       $title_fact->html()
     );
-    $subtitle_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(4) >  h5.fw-bold');
+    $subtitle_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(4) > div.fs-5');
     $this->assertStringContainsString(
       'Test variants',
       $subtitle_fact->html()
@@ -157,12 +157,12 @@ public function testRendering(): void {
       $description_fact->html()
     );
 
-    $title_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(5) > h4.text-capitalize.fw-bold');
+    $title_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(5) > div.fs-3');
     $this->assertStringContainsString(
       '345 Dev Ticket',
       $title_fact->html()
     );
-    $subtitle_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(5) >  h5.fw-bold');
+    $subtitle_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(5) > div.fs-5');
     $this->assertStringContainsString(
       'Jira ticket',
       $subtitle_fact->html()
@@ -173,12 +173,12 @@ public function testRendering(): void {
       $description_fact->html()
     );
 
-    $title_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(6) > h4.text-capitalize.fw-bold');
+    $title_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(6) > div.fs-3');
     $this->assertStringContainsString(
       '43 Components',
       $title_fact->html()
     );
-    $subtitle_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(6) >  h5.fw-bold');
+    $subtitle_fact = $crawler->filter('div.row-cols-md-3.row > div.col:nth-child(6) > div.fs-5');
     $this->assertStringContainsString(
       'Figma components',
       $subtitle_fact->html()

modules/oe_whitelabel_paragraphs/tests/src/Kernel/Paragraphs/ListingParagraphsTest.php

@@ -132,7 +132,7 @@ public function testListing(): void {
     $assert->assertHighlightListingRendering($crawler, $image_file);
     $this->assertCount(1, $crawler->filter('div.bcl-listing--highlight-2-col'));
     $this->assertCount(1, $crawler->filter('div.row.row-cols-1.row-cols-md-2'));
-    $this->assertCount(6, $crawler->filter('div.listing-item--highlight'));
+    $this->assertCount(6, $crawler->filter('article.listing-item--highlight'));
     $this->assertCount(6, $crawler->filter('div.card-body'));
 
     // Testing Highlight 3 col.
@@ -146,7 +146,7 @@ public function testListing(): void {
     $assert->assertHighlightListingRendering($crawler, $image_file);
     $this->assertCount(1, $crawler->filter('div.bcl-listing--highlight-3-col'));
     $this->assertCount(1, $crawler->filter('div.row.row-cols-1.row-cols-md-3'));
-    $this->assertCount(6, $crawler->filter('div.listing-item--highlight'));
+    $this->assertCount(6, $crawler->filter('article.listing-item--highlight'));
     $this->assertCount(6, $crawler->filter('div.card-body'));
   }
 

modules/oe_whitelabel_paragraphs/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php

@@ -73,7 +73,7 @@ public function testFeaturedMedia(): void {
 
     $this->assertCount(1, $crawler->filter('div.row'));
     $this->assertCount(1, $crawler->filter('div.col-12.col-md-4'));
-    $this->assertCount(0, $crawler->filter('h3'));
+    $this->assertCount(0, $crawler->filter('h2'));
     $this->assertCount(0, $crawler->filter('div.col-12.col-md-6.order-md-1'));
     $this->assertCount(0, $crawler->filter('div.col-12.col-md-6.order-md-2'));
     $figure = $crawler->filter('figure');
@@ -95,7 +95,7 @@ public function testFeaturedMedia(): void {
 
     $this->assertCount(1, $crawler->filter('div.row'));
     $this->assertCount(0, $crawler->filter('div.col-12.col-md-4'));
-    $this->assertCount(1, $crawler->filter('h3'));
+    $this->assertCount(1, $crawler->filter('h2'));
     $this->assertCount(1, $crawler->filter('div.col-12.col-md-6.order-md-1'));
     $this->assertCount(1, $crawler->filter('div.col-12.col-md-6.order-md-2'));
     $figure = $crawler->filter('figure');
@@ -119,7 +119,7 @@ public function testFeaturedMedia(): void {
 
     $this->assertCount(1, $crawler->filter('div.row'));
     $this->assertCount(0, $crawler->filter('div.col-12.col-md-4'));
-    $this->assertCount(1, $crawler->filter('h3'));
+    $this->assertCount(1, $crawler->filter('h2'));
     $this->assertCount(1, $crawler->filter('div.col-12.col-md-6.order-md-1'));
     $this->assertCount(1, $crawler->filter('div.col-12.col-md-6.order-md-2'));
     $figure = $crawler->filter('figure');
@@ -162,7 +162,7 @@ public function testFeaturedMedia(): void {
 
     $this->assertCount(1, $crawler->filter('div.row'));
     $this->assertCount(1, $crawler->filter('div.col-12.col-md-4'));
-    $this->assertCount(0, $crawler->filter('h3'));
+    $this->assertCount(0, $crawler->filter('h2'));
     $this->assertCount(0, $crawler->filter('div.col-12.col-md-6.order-md-1'));
     $this->assertCount(0, $crawler->filter('div.col-12.col-md-6.order-md-2'));
     $this->assertCount(1, $crawler->filter('div.ratio.ratio-16x9'));
@@ -189,7 +189,7 @@ public function testFeaturedMedia(): void {
 
     $this->assertCount(1, $crawler->filter('div.row'));
     $this->assertCount(0, $crawler->filter('div.col-12.col-md-4'));
-    $this->assertCount(1, $crawler->filter('h3'));
+    $this->assertCount(1, $crawler->filter('h2'));
     $this->assertCount(1, $crawler->filter('div.col-12.col-md-6.order-md-1'));
     $this->assertCount(1, $crawler->filter('div.col-12.col-md-6.order-md-2'));
     $this->assertCount(1, $crawler->filter('div.ratio.ratio-16x9'));
@@ -218,7 +218,7 @@ public function testFeaturedMedia(): void {
 
     $this->assertCount(1, $crawler->filter('div.row'));
     $this->assertCount(0, $crawler->filter('div.col-12.col-md-4'));
-    $this->assertCount(1, $crawler->filter('h3'));
+    $this->assertCount(1, $crawler->filter('h2'));
     $this->assertCount(1, $crawler->filter('div.col-12.col-md-6.order-md-1'));
     $this->assertCount(1, $crawler->filter('div.col-12.col-md-6.order-md-2'));
     $this->assertCount(1, $crawler->filter('div.ratio.ratio-16x9'));
@@ -252,7 +252,7 @@ public function testFeaturedMedia(): void {
 
     $this->assertCount(1, $crawler->filter('div.row'));
     $this->assertCount(0, $crawler->filter('div.col-12.col-md-4'));
-    $this->assertCount(1, $crawler->filter('h3'));
+    $this->assertCount(1, $crawler->filter('h2'));
     $this->assertCount(1, $crawler->filter('div.col-12.col-md-6.order-md-1'));
     $this->assertCount(1, $crawler->filter('div.col-12.col-md-6.order-md-2'));
     $this->assertCount(1, $crawler->filter('div.ratio.ratio-16x9'));

modules/oe_whitelabel_paragraphs/tests/src/Kernel/Paragraphs/RichTextTest.php

@@ -45,7 +45,7 @@ public function testRendering(): void {
     $html = $this->renderParagraph($paragraph);
     $crawler = new Crawler($html);
 
-    $title = $crawler->filter('h4');
+    $title = $crawler->filter('h2');
     $this->assertCount(1, $title);
     $this->assertStringContainsString(
       'Rich text example',

modules/oe_whitelabel_paragraphs/tests/src/Kernel/PatternAssertions/ListingAssertion.php

@@ -23,7 +23,7 @@ class ListingAssertion extends Assert {
    *   Image file added to the list item.
    */
   public function assertDefaultListingRendering(Crawler $crawler, File $file): void {
-    $this->assertCount(6, $crawler->filter('div.listing-item.border-bottom.border-md-0.border-0.card'));
+    $this->assertCount(6, $crawler->filter('article.listing-item.border-bottom.border-md-0.border-0.card'));
     $this->assertCount(6, $crawler->filter('div.mw-listing-img'));
     $this->assertCount(6, $crawler->filter('div.card-body.p-0.pb-md-0.pb-3'));
     $text_element = $crawler->filter('div.card-text');
@@ -40,7 +40,7 @@ public function assertDefaultListingRendering(Crawler $crawler, File $file): voi
    *   Image file added to the list item.
    */
   public function assertHighlightListingRendering(Crawler $crawler, File $file): void {
-    $this->assertCount(6, $crawler->filter('div.listing-item--highlight.border-0.bg-lighter.card'));
+    $this->assertCount(6, $crawler->filter('article.listing-item--highlight.border-0.bg-lighter.card'));
     $text_element = $crawler->filter('div.card-text');
     $this->assertCount(6, $text_element);
     $this->assertImageRendering($crawler, $file);
@@ -57,16 +57,16 @@ public function assertHighlightListingRendering(Crawler $crawler, File $file): v
   public function assertListingRendering(Crawler $crawler, int $nid): void {
     $this->assertCount(1, $crawler->filter('div.bcl-listing'));
     $this->assertCount(6, $crawler->filter('div.row-cols-1.g-4 > div.col'));
-    $this->assertStringContainsString('Listing item block title', trim($crawler->filter('h2.fw-bold')->text()));
-    $this->assertCount(6, $crawler->filter('h5.card-title'));
+    $this->assertStringContainsString('Listing item block title', trim($crawler->filter('h2.bcl-heading')->text()));
+    $this->assertCount(6, $crawler->filter('h1.card-title'));
     $link_element = $crawler->filter('a.text-underline-hover');
     $this->assertCount(6, $link_element);
     $this->assertStringContainsString(
       'node/' . $nid,
       $link_element->attr('href')
     );
     $text_element = $crawler->filter('div.card-text');
-    $this->assertStringContainsString('Item title 1', trim($crawler->filter('h5.card-title > a.text-underline-hover')->text()));
+    $this->assertStringContainsString('Item title 1', trim($crawler->filter('h1.card-title > a.text-underline-hover')->text()));
     $this->assertStringContainsString('Label 1 - 1', trim($crawler->filter('span.badge')->eq(0)->text()));
     $this->assertStringContainsString('Label 2 - 1', trim($crawler->filter('span.badge')->eq(1)->text()));
     $this->assertStringContainsString(

templates/content/field--node--body--oe-sc-event.html.twig

@@ -1,7 +1,7 @@
 {#
 /**
  * @file
- * Default template for a field.
+ * Template for event body field.
  */
 #}
 {%
@@ -13,7 +13,6 @@
 {%
   set title_classes = [
   'field__label',
-  'fw-bold',
   label_display == 'visually_hidden' ? 'visually-hidden',
 ]
 %}
@@ -32,9 +31,13 @@
   {% endif %}
 {% else %}
   <div{{ attributes.addClass(classes) }}>
-    <h3{{ title_attributes.addClass(title_classes) }}>
-      {{ label }}{% if label_display == 'inline' %}<span class="me-1">:</span>{% endif %}
-    </h3>
+    {%- set _label -%}
+      {{- label -}}{%- if label_display == 'inline' -%}<span class="me-1">:</span>{%- endif -%}
+    {%- endset -%}
+    {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+      title: _label,
+      attributes: create_attribute().addClass(title_classes)
+    } only %}
     {% if multiple %}
     <div class="field__items">
       {% endif %}

templates/content/field--node--oe-documents--oe-sc-event.html.twig

@@ -1,7 +1,7 @@
 {#
 /**
  * @file
- * Default template for a field.
+ * Template for event documents field.
  */
 #}
 {%
@@ -13,7 +13,6 @@
 {%
   set title_classes = [
   'field__label',
-  'fw-bold',
   label_display == 'visually_hidden' ? 'visually-hidden',
 ]
 %}
@@ -32,9 +31,13 @@
   {% endif %}
 {% else %}
   <div{{ attributes.addClass(classes) }}>
-    <h3{{ title_attributes.addClass(title_classes) }}>
-      {{ label }}{% if label_display == 'inline' %}<span class="me-1">:</span>{% endif %}
-    </h3>
+    {%- set _label -%}
+      {{- label -}}{%- if label_display == 'inline' -%}<span class="me-1">:</span>{%- endif -%}
+    {%- endset -%}
+    {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+      title: _label,
+      attributes: create_attribute().addClass(title_classes)
+    } only %}
     {% if multiple %}
     <div class="field__items">
       {% endif %}