OEL-1047: [BE] BCL 0.19.0 Analysis

kits/default/package.json

@@ -13,7 +13,7 @@
     "production": "npm-run-all build:*"
   },
   "devDependencies": {
-    "@openeuropa/bcl-builder": "0.14.0",
+    "@openeuropa/bcl-builder": "0.19.0",
     "chokidar-cli": "^3.0.0",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",

package.json

@@ -15,8 +15,8 @@
     "production": "npm-run-all build:*"
   },
   "devDependencies": {
-    "@openeuropa/bcl-builder": "0.14.0",
-    "@openeuropa/bcl-theme-default": "0.14.0",
+    "@openeuropa/bcl-builder": "0.19.0",
+    "@openeuropa/bcl-theme-default": "0.19.0",
     "bootstrap-ie11": "5.0.2",
     "chokidar-cli": "^3.0.0",
     "copyfiles": "2.4.1",

patches/npm/@openeuropa+bcl-theme-default+0.19.0.patch

@@ -0,0 +1,77 @@
+diff --git a/node_modules/@openeuropa/bcl-theme-default/templates/bcl-navbar/navbar.html.twig b/node_modules/@openeuropa/bcl-theme-default/templates/bcl-navbar/navbar.html.twig
+index 116adb2..6e65e4c 100644
+--- a/node_modules/@openeuropa/bcl-theme-default/templates/bcl-navbar/navbar.html.twig
++++ b/node_modules/@openeuropa/bcl-theme-default/templates/bcl-navbar/navbar.html.twig
+@@ -45,27 +45,28 @@
+   {{ attributes }}
+ >
+   <div class='container'>
+-  {% if _brand is not empty %}
+-    <a class='navbar-brand' href='{{ _brand.link }}'>
+-    {% for logo in _brand.logos %}
+-      <img
+-        src='{{ logo.src }}'
+-        {% if logo.alt is not empty %}
+-        alt='{{ logo.alt }}'
+-        {% endif %}
+-        {% if logo.class is not empty %}
+-        class='{{ logo.class }}'
+-        {% endif %}
+-      />
+-    {% endfor %}
+-  {%- if _brand.label is defined -%}
+-   <div class="h5 ms-4-5 d-none d-lg-inline-block">
+-    {{- _brand.label -}}
+-    </div>
+-  {% endif %}
+-    </a>
+-  {% endif %}
+-
++  {% block branding %}
++    {% if _brand is not empty %}
++      <a class='navbar-brand' href='{{ _brand.link }}'>
++      {% for logo in _brand.logos %}
++        <img
++          src='{{ logo.src }}'
++          {% if logo.alt is not empty %}
++          alt='{{ logo.alt }}'
++          {% endif %}
++          {% if logo.class is not empty %}
++          class='{{ logo.class }}'
++          {% endif %}
++        />
++      {% endfor %}
++    {%- if _brand.label is defined -%}
++     <div class="h5 ms-4-5 d-none d-lg-inline-block">
++      {{- _brand.label -}}
++      </div>
++    {% endif %}
++      </a>
++    {% endif %}
++  {% endblock %}
+   {% if not _disable_collapse %}
+     <button
+       class='navbar-toggler'
+@@ -80,12 +81,16 @@
+     </button>
+     <div class='collapse navbar-collapse' id='{{ _collapse_id }}'>
+     {% endif %}
+-      {% if _navigation is not empty %}
+-        {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with _navigation only %}
+-      {% endif %}
+-      {% if _form is not empty %}
+-        {% include '@oe-bcl/bcl-form/form.html.twig' with _form only %}
+-      {% endif %}
++      {% block navigation %}
++        {% if _navigation is not empty %}
++          {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with _navigation only %}
++        {% endif %}
++      {%  endblock %}
++      {% block right %}
++        {% if _form is not empty %}
++          {% include '@oe-bcl/bcl-form/form.html.twig' with _form only %}
++        {% endif %}
++      {%  endblock %}
+     {% if not _disable_collapse %}
+     </div>
+     {% endif %}

tests/src/Kernel/Paragraphs/DescriptionListTest.php

@@ -41,7 +41,7 @@ public function testRendering(): void {
     $this->assertCount(1, $crawler->filter('h4'));
     $this->assertCount(1, $crawler->filter('dl.d-md-grid.grid-3-9'));
     $this->assertCount(2, $crawler->filter('dd'));
-    $this->assertCount(2, $crawler->filter('dt div.align-middle.d-inline-block'));
+    $this->assertCount(2, $crawler->filter('dt'));
 
     $title = $crawler->filter('h4.fw-bold.mb-4');
     $this->assertEquals('Description list paragraph', $title->text());

tests/src/Kernel/fixtures/markup_rendering_patterns/card.yml

@@ -81,7 +81,7 @@ card_variant_search:
       badges:
         - first: 'first key'
           '#title': 'Category 1'
-        - first: 'first key'
+        - second: 'second key'
           '#title': 'Category 2'
   assert:
     count:
@@ -91,10 +91,9 @@ card_variant_search:
       'div.card-body.p-0.pb-md-0.pb-3': 1
       'img.d-none.d-md-block.card-img-top': 1
       'img[src="https://placeimg.com/1000/500/arch"]': 1
-      'span.me-2.badge.bg-primary': 1
-      'span.badge.bg-primary': 2
+      'span.badge.rounded-pill.badge-outline-primary': 2
     equals:
       'h5.card-title': 'Title card'
       'p.card-text.mb-2-5': 'Text card with longer text which is supported'
-    contains:
-      'span.me-2.badge.bg-primary': 'Category 1'
+      'div > span.badge.badge-outline-primary:nth-child(1)': 'Category 1'
+      'div > span.badge.badge-outline-primary:nth-child(2)': 'Category 2'

tests/src/Kernel/fixtures/markup_rendering_patterns/date_block.yml

@@ -6,11 +6,10 @@ date_block_default:
       date: '2021-05-26'
   assertions:
     count:
-      'time.bcl-date-block.d-flex.flex-column.align-items-center.justify-content-center.bg-date.text-light.pt-3.rounded-top.mw-date': 1
+      'time.bcl-date-block.d-flex.flex-column.align-items-center.justify-content-center.bg-date.text-light.pt-2.rounded-top.mw-date': 1
       'time[datetime="2021-05-26"]': 1
-      'span.pb-3.text-uppercase': 1
-      'span.bg-light.w-100.text-center.py-2.text-dark.rounded-bottom.mb-n1': 1
+      'span.py-4.bg-white.border.border-bottom-0.w-100.fs-5.fw-medium.text-dark.text-center.text-uppercase': 1
+      'span.bg-lighter.border.w-100.text-center.fs-5.text-dark.rounded-bottom.mb-n1': 1
     equals:
-      'span.pb-3.text-uppercase': 'May'
-      'span.bg-light.w-100.text-center.py-2.text-dark.rounded-bottom.mb-n1': '2021'
-      'time span:nth-child(1)': '26'
+      'span.py-4.bg-white.border.border-bottom-0.w-100.fs-5.fw-medium.text-dark.text-center.text-uppercase': '26 May'
+      'span.bg-lighter.border.w-100.text-center.fs-5.text-dark.rounded-bottom.mb-n1': '2021'

tests/src/Kernel/fixtures/markup_rendering_patterns/description_list.yml

@@ -19,8 +19,10 @@ description_list_default:
             - label:
               - '#markup': 'A label with <em>some</em> markup.'
           definition:
-            - '#markup': '<p class="mb-2">First line description of third term text goes here.</p>'
-            - '#markup': 'Second line description of third term text goes here.'
+            - label:
+                - '#markup': '<p class="mb-2">First line description of third term text goes here.</p>'
+            - label:
+                - '#markup': 'Second line description of third term text goes here.'
         # This entry covers the scenario of passing an array as icon.
         - term:
           - label: 'Custom icon size'
@@ -46,17 +48,17 @@ description_list_default:
       'dl > dt:nth-of-type(3) > svg': '/themes/custom/oe_bootstrap_theme/assets/icons/bootstrap-icons.svg#calendar-event'
       'dl > dt:nth-of-type(5) > svg': '/themes/custom/oe_bootstrap_theme/assets/icons/bootstrap-icons.svg#bicycle'
     equals:
-      'dl > dt:nth-child(1) > div': 'Single label with icon'
+      'dl > dt:nth-child(1) > p': 'Single label with icon'
       'dl > dd:nth-child(2)': 'Description of first term text goes here.'
-      'dl > dt:nth-child(3) > div': 'First label without icon'
-      'dl > dt:nth-child(4) > div': 'Second label with icon'
+      'dl > dt:nth-child(3)': 'First label without icon'
+      'dl > dt:nth-child(4) > p': 'Second label with icon'
       'dl > dd:nth-child(5)': 'Description of second term text goes here.'
-      'dl > dt:nth-child(6) > div': 'A label with <em>some</em> markup.'
+      'dl > dt:nth-child(6)': 'A label with <em>some</em> markup.'
       'dl > dd:nth-child(7)': '<p class="mb-2">First line description of third term text goes here.</p>'
       'dl > dd:nth-child(8)': 'Second line description of third term text goes here.'
-      'dl > dt:nth-child(9) > div': 'Custom icon size'
+      'dl > dt:nth-child(9) > p': 'Custom icon size'
       'dl > dd:nth-child(10)': 'This is a bigger icon.'
-      'dl > dt:nth-child(11) > div': 'A single term without icon.'
+      'dl > dt:nth-child(11)': 'A single term without icon.'
       'dl > dd:nth-child(12)': 'Yet another definition text.'
 description_list_horizontal:
   render:
@@ -77,8 +79,8 @@ description_list_horizontal:
           definition: 'Description of second term text goes here.'
         - term: 'A single term without icon.'
           definition:
-            - 'First definition for third term.'
-            - 'Second definition for third term.'
+            - label: 'First definition for third term.'
+            - label: 'Second definition for third term.'
   assertions:
     count:
       'dl': 1
@@ -90,11 +92,11 @@ description_list_horizontal:
       'dl > div:nth-child(1) > dt > svg': '/themes/custom/oe_bootstrap_theme/assets/icons/bootstrap-icons.svg#geo-alt-fill'
       'dl > div:nth-child(3) > dt:nth-child(2) > svg': '/themes/custom/oe_bootstrap_theme/assets/icons/bootstrap-icons.svg#calendar-event'
     equals:
-      'dl > div:nth-child(1) > dt > div': 'Single label with icon'
+      'dl > div:nth-child(1) > dt > p': 'Single label with icon'
       'dl > dd:nth-child(2)': 'Description of first term text goes here.'
-      'dl > div:nth-child(3) > dt:nth-child(1) > div': 'First label without icon'
-      'dl > div:nth-child(3) > dt:nth-child(2) > div': 'Second label with icon'
+      'dl > div:nth-child(3) > dt:nth-child(1)': 'First label without icon'
+      'dl > div:nth-child(3) > dt:nth-child(2) > p': 'Second label with icon'
       'dl > dd:nth-child(4)': 'Description of second term text goes here.'
-      'dl > div:nth-child(5) > dt > div': 'A single term without icon.'
+      'dl > div:nth-child(5) > dt': 'A single term without icon.'
       'dl > div:nth-child(6) > dd:nth-child(1)': 'First definition for third term.'
       'dl > div:nth-child(6) > dd:nth-child(2)': 'Second definition for third term.'

tests/src/Kernel/fixtures/markup_rendering_patterns/links_block.yml

@@ -17,14 +17,14 @@ links_block_vertical_gray:
   assertions:
     count:
       'div.bg-light.px-4.py-3': 1
-      'h5.fw-bold.pb-3.mb-3.border-bottom': 1
+      'h2.fw-bold.pb-3.mb-3.border-bottom': 1
       'ul.ps-0.mb-0': 1
       'li.list-unstyled': 3
       'li.d-inline': 0
       'li.list-unstyled.me-4-5': 2
       'a.pb-3.d-inline-block': 3
     equals:
-      'div.bg-light > h5': 'Title Link Block'
+      'div.bg-light > h2': 'Title Link Block'
       'div.bg-light > ul > li.list-unstyled.me-4-5:nth-child(1) a[href="https://example.com"]': 'Link number one'
       'div.bg-light > ul > li.list-unstyled.me-4-5:nth-child(2) a[href="https://google.com"]': 'Link number two'
       'div.bg-light > ul > li.list-unstyled:nth-child(3) a[href="https://europa.eu"]': 'More channels'
@@ -47,14 +47,14 @@ links_block_horizontal_gray:
   assertions:
     count:
       'div.bg-light.px-4.py-3': 1
-      'h5.fw-bold.pb-3.mb-3.border-bottom': 1
+      'h2.fw-bold.pb-3.mb-3.border-bottom': 1
       'ul.ps-0.mb-0': 1
       'li.d-inline': 3
       'li.list-unstyled': 3
       'li.list-unstyled.me-4-5': 2
       'a.pb-3.d-inline-block': 3
     equals:
-      'div.bg-light > h5': 'Title Link Block'
+      'div.bg-light > h2': 'Title Link Block'
       'div.bg-light > ul > li.list-unstyled.d-inline.me-4-5:nth-child(1) a[href="https://example.com"]': 'Link number one'
       'div.bg-light > ul > li.list-unstyled.d-inline.me-4-5:nth-child(2) a[href="https://google.com"]': 'Link number two'
       'div.bg-light > ul > li.list-unstyled.d-inline:nth-child(3) a[href="https://europa.eu"]': 'More channels'
@@ -77,14 +77,14 @@ links_block_vertical_transparent:
   assertions:
     count:
       'div.bg-light.px-4.py-3': 0
-      'h5.fw-bold.pb-3.mb-3.border-bottom': 1
+      'h2.fw-bold.pb-3.mb-3.border-bottom': 1
       'ul.ps-0.mb-0': 1
       'li.d-inline': 0
       'li.list-unstyled': 3
       'li.list-unstyled.me-4-5': 2
       'a.pb-3.d-inline-block': 3
     equals:
-      'div > h5': 'Title Link Block'
+      'div > h2': 'Title Link Block'
       'div > ul > li.list-unstyled.me-4-5:nth-child(1) a[href="https://example.com"]': 'Link number one'
       'div > ul > li.list-unstyled.me-4-5:nth-child(2) a[href="https://google.com"]': 'Link number two'
       'div > ul > li.list-unstyled:nth-child(3) a[href="https://europa.eu"]': 'More channels'
@@ -107,14 +107,14 @@ links_block_horizontal_transparent:
   assertions:
     count:
       'div.bg-light.px-4.py-3': 0
-      'h5.fw-bold.pb-3.mb-3.border-bottom': 1
+      'h2.fw-bold.pb-3.mb-3.border-bottom': 1
       'ul.ps-0.mb-0': 1
       'li.d-inline': 3
       'li.list-unstyled': 3
       'li.list-unstyled.me-4-5': 2
       'a.pb-3.d-inline-block': 3
     equals:
-      'div > h5': 'Title Link Block'
+      'div > h2': 'Title Link Block'
       'div > ul > li.list-unstyled.d-inline:nth-child(1) a[href="https://example.com"]': 'Link number one'
       'div > ul > li.list-unstyled.d-inline:nth-child(2) a[href="https://google.com"]': 'Link number two'
       'div > ul > li.list-unstyled.d-inline:nth-child(3) a[href="https://europa.eu"]': 'More channels'