@openeuropa/bcl-theme-default 0.21.0 → 0.22.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "OE - BCL theme default",
   "scripts": {
     "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
@@ -21,9 +21,9 @@
     "@ecl/resources-ec-logo": "3.2.3",
     "@ecl/resources-eu-logo": "3.2.3",
     "@ecl/resources-flag-icons": "3.2.3",
-    "@openeuropa/bcl-bootstrap": "^0.21.0",
-    "@openeuropa/bcl-builder": "^0.21.0",
-    "@openeuropa/bcl-twig-templates": "^0.21.0",
+    "@openeuropa/bcl-bootstrap": "^0.22.0",
+    "@openeuropa/bcl-builder": "^0.22.0",
+    "@openeuropa/bcl-twig-templates": "^0.22.0",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
     "glob": "7.2.0",
@@ -47,5 +47,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "18c01b34ca76780f480c692c566dfe507d961ccf"
+  "gitHead": "57304ad94ae3c234f2f2b904208ce540a7a53f23"
 }

package/src/js/gallery/gallery.js

@@ -29,7 +29,7 @@ const CAROUSEL_SELECTOR = '.carousel'
 const CAROUSEL_PAGER_SELECTOR = '.carousel-pager span'
 const CAROUSEL_ACTIVE_SELECTOR = '.carousel-item.active'
 const CAROUSEL_ITEM_SELECTOR = '.carousel-item'
-const THUMBNAIL_SELECTOR = '.bcl-gallery__grid a'
+const THUMBNAIL_SELECTOR = '.bcl-gallery__grid a, .bcl-gallery__mobile-view-more'
 const MODAL_SELECTOR = '.modal'
 const EVENT_MODAL_HIDE = 'hide.bs.modal'
 const CAROUSEL_EVENT = 'slide.bs.carousel'
@@ -149,8 +149,8 @@ class Gallery extends BaseComponent {
  */
 
 EventHandler.on(document, EVENT_CLICK_DATA_API, THUMBNAIL_SELECTOR, function (event) {
-  const gallery = event.srcElement.closest('div.bcl-gallery')
-  const firstSlide = event.srcElement.parentNode.getAttribute('data-bs-slide-to');
+  const gallery = event.target.closest('div.bcl-gallery')
+  const firstSlide = event.target.parentNode.getAttribute('data-bs-slide-to');
   gallery.dataset.galleryStart = firstSlide;
 
   Gallery.galleryInterface(gallery, Gallery.getInstance(gallery))

package/src/scss/_gallery.scss

@@ -85,6 +85,13 @@
     }
   }
 
+  .bcl-gallery__mobile-view-more > span {
+    display: block;
+    & * {
+      pointer-events: none;
+    }
+  }
+
   .carousel {
     height: 100%;
     width: 100%;

package/src/scss/base/_colors.scss

@@ -1,12 +1,23 @@
 // Custom theme colors
 
-$primary: #0a58ca;
-$secondary: #801f4f;
-$info: #087990;
-$danger: #b02a37;
-$warning: #ffc107;
-$success: #198754;
+$primary: #253ebe;
+$secondary: #70254a;
+$info: #0d768b;
+$danger: #a51f2c;
+$warning: #ffba07;
+$success: #09854c;
 $light: #f8f9fa;
 $dark: #212529;
 
 $text-muted: #495057;
+
+$link-visited: #6b22b5;
+
+// Color variants scales
+
+// Tables
+$table-hover-bg-factor: 0.1;
+
+// Alerts
+$alert-bg-scale: -90%;
+$alert-border-scale: -80%;

package/src/scss/base/_utilities.scss

@@ -63,6 +63,7 @@ $utilities: map-merge(
   )
 );
 
+/* stylelint-disable no-descending-specificity */
 a {
   text-underline-offset: 2px;
 
@@ -81,7 +82,15 @@ a {
       text-decoration: underline;
     }
   }
+
+  &:visited {
+    color: $link-visited;
+    &:hover {
+      color: shade-color($link-visited, 20%);
+    }
+  }
 }
+/* stylelint-enable no-descending-specificity */
 
 svg {
   fill: currentColor;

package/templates/bcl-alert/alert.html.twig

@@ -37,6 +37,14 @@
   {% set _classes = _classes|merge(['fade', 'show']) %}
 {% endif %}
 
+{% set _classes = _classes|merge(['text-dark']) %}
+
+{% set _icon_classes = ['flex-shrink-0 me-3 mt-1 align-self-start' ] %}
+
+{% if _variant != 'light' %}
+  {% set _icon_classes = _icon_classes|merge(['text-' ~ _variant]) %}
+{% endif %}
+
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
@@ -49,7 +57,7 @@
     name: _icon_name ?: _icon_names[_variant],
     size: 's',
     path: _icon_path,
-    attributes: create_attribute().addClass(['flex-shrink-0 me-3 mt-1 align-self-start']),
+    attributes: create_attribute().addClass(_icon_classes),
   } only %}
 {% endif %}
   <div class="alert-content flex-grow-1">

package/templates/bcl-banner/banner.html.twig

@@ -14,6 +14,7 @@
 
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('div') %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _description = description|default('') %}
 {% set _link = link|default({}) %}
 {% set _image = image|default('') %}
@@ -28,11 +29,13 @@
   {% set _content_class = _content_class ~ " " ~ _content_classes %}
 {% endif %}
 
-{% set _title_classes = "display-6" %}
+{% set _title_classes = ['display-6'] %}
 {% if _description is not empty or _link is not empty %}
-  {% set _title_classes = _title_classes ~ " mb-3" %}
+  {% set _title_classes = _title_classes|merge(['mb-3']) %}
 {% endif %}
 
+{% set _title_attributes = _title_attributes.addClass(_title_classes) %}
+
 {% set _classes = [
   'bcl-banner',
   _shade ? 'shade',
@@ -53,14 +56,18 @@
   {% endif %}
   <div class="container">
     <div class="{{ _content_class }}">
-    {% if _title is not empty %}
-      <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
-      {% if _description is not empty %}
-      <p class="mb-4">{{ _description }}</p>
-      {% endif %}
-      {% if _link.path %}
-        {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
+      {% if _title is not empty %}
+        {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+          title: _title,
+          title_tag: _title_tag,
+          attributes: _title_attributes,
+        } only %}
       {% endif %}
+    {% if _description is not empty %}
+      <p class="mb-4">{{ _description }}</p>
+    {% endif %}
+    {% if _link.path %}
+      {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
     {% endif %}
     </div>
   </div>

package/templates/bcl-description-list/description-list.html.twig

@@ -4,6 +4,7 @@
   Parameters:
   - title: (string) (default: "")
   - title_tag: (string) (default: "h2")
+  - title_attributes (drupal attrs)
   - "items" (array) (default: []): format: [
       {
         "term" (object or array of object) -format: {
@@ -22,6 +23,7 @@
 
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _items = items|default([]) %}
 {% set _variant = variant|default('') %}
 
@@ -34,10 +36,11 @@
 {% endif %}
 
 {% if _title is not empty %}
-  {% set _title_classes = 'fw-bold mb-4' %}
-  <{{ _title_tag }} class="{{ _title_classes }}">
-    {{- _title -}}
-  </{{ _title_tag }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    attributes: _title_attributes,
+  } only %}
 {% endif %}
 
 <dl

package/templates/bcl-fact-figures/fact-figures.html.twig

@@ -26,6 +26,7 @@
 
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
+{% set _title_attributes = title_attributes ?: create_attribute().addClass(['fw-bold']) %}
 {% set _variant = variant|default('default') %}
 {% set _css_classes = ['bcl-fact-figures', 'bcl-fact-figures--' ~ _variant] %}
 {% set _display_icons = display_icons ?? true %}
@@ -68,8 +69,11 @@
 
 <div {{ attributes }}>
 {% if _title is not empty %}
-  {% set _title_classes = 'fw-bold' %}
-  <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    attributes: _title_attributes,
+  } only %}
 {% endif %}
   <div
   {% if _wrapper_classes is not empty %}

package/templates/bcl-file/file.html.twig

@@ -4,6 +4,7 @@
   Parameters:
   - title (string) (default: '')
   - title_tag (string) (default: 'h2')
+  - title_attributes (drupal attrs)
   - item_title (string) (default: '')
   - icon (icon Object) (default: {})
   - text (string) (default: '')
@@ -37,6 +38,7 @@
 {% set _icon = icon|default({}) %}
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _item_title = item_title|default('') %}
 {% set _text = text|default('') %}
 {% set _content = content|default('') %}
@@ -62,10 +64,11 @@
 {% endif %}
 
 {% if _title is not empty %}
-  {% set _title_classes = 'fw-bold mb-4' %}
-  <{{ _title_tag }} class="{{ _title_classes }}">
-    {{- _title -}}
-  </{{ _title_tag }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    attributes: _title_attributes,
+  } only %}
 {% endif %}
 
 {% if _variant == 'card' %}
@@ -168,7 +171,7 @@
               {% if _item.title is not empty %}
                 <p class="fw-bold m-0">{{ _item.title }}</p>
               {% endif %}
-              {% if _item.title is not empty %}
+              {% if _item.description is not empty %}
                 <p class="m-0">{{ _item.description }}</p>
               {% endif %}
               {% if _item.language is not empty or _item.meta is not empty %}

package/templates/bcl-form/form.html.twig

@@ -3,6 +3,7 @@
 {# Parameters:
   - title: (string) (default: '')
   - title_tag: (string) (default: 'h2')
+  - title_attributes (drupal attrs)
   - helper_text (string) (default: '')
   - antispam (string) (default: '')
   - items (array of array of objects) (default: []) format: [
@@ -26,6 +27,7 @@
 
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _helper_text = helper_text|default('') %}
 {% set _items = items|default([]) %}
 {% set _antispam = antispam|default('') %}
@@ -36,10 +38,11 @@
 {% endif %}
 
 {% if _title is not empty %}
-  {% set _title_classes = 'fw-bold mb-4' %}
-  <{{ _title_tag }} class="{{ _title_classes }}">
-    {{- _title -}}
-  </{{ _title_tag }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    attributes: _title_attributes,
+  } only %}
 {% endif %}
 
 {% if _helper_text is not empty %}

package/templates/bcl-gallery/gallery.html.twig

@@ -5,6 +5,7 @@ Parameters:
   - "id" (string) (default: '')
   - "title" (string) (default: '')
   - "title_tag" (string) (default: 'h2')
+  - "title_attributes" (drupal attrs)
   - "counter" (string) (default: '')
   - "toggle_collapsed" (string) (default: '')
   - "toggle_expanded" (string) (default: '')
@@ -30,6 +31,7 @@ Parameters:
 {% set _id = id|default('gallery-' ~ random(1000)) %}
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _counter = counter|default('') %}
 {% set _toggle_collapsed = toggle_collapsed|default('') %}
 {% set _toggle_expanded = toggle_expanded|default('') %}
@@ -59,12 +61,13 @@ Parameters:
     {% if _items is iterable %}
       <div class="d-sm-flex flex-sm-row align-items-sm-center">
         <div class="flex-sm-grow-1">
-          {%- if _title is not empty -%}
-            {% set _title_classes = 'fw-bold mb-3' %}
-            <{{ _title_tag }} class="{{ _title_classes }}">
-              {{- _title -}}
-            </{{ _title_tag }}>
-          {%- endif -%}
+        {% if _title is not empty %}
+          {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+            title: _title,
+            title_tag: _title_tag,
+            attributes: _title_attributes,
+          } only %}
+        {% endif %}
         </div>
         <div class="mb-3 mb-sm-0 fw-bold">
           {%- if _counter is not empty -%}

package/templates/bcl-heading/heading.html.twig

@@ -0,0 +1,42 @@
+{% spaceless %}
+
+{# Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - path (string) (default: '')
+  - link: (object) (default: {})
+  - attributes (drupal attrs)
+#}
+
+{% set _title = title|default('') %}
+{% set _path = path|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _link = link|default({}) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{%  endif %}
+
+{% if attributes.class is empty %}
+  {% set attributes = attributes.addClass(['fw-bold', 'mb-4']) %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['bcl-heading']) %}
+
+{% if _link is not empty and _title is not empty and _link.label is empty %}
+  {% set _link = _link|merge({ label: _title }) %}
+{% endif %}
+
+{% if _title is not empty or _link is not empty %}
+<{{ _title_tag }} 
+  {{- attributes -}}
+>
+{%- if _link is not empty -%}
+  {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
+{%- else -%}
+  {{- _title -}}
+{%- endif %}
+</{{ _title_tag }}>
+{% endif -%}
+
+{% endspaceless %}

package/templates/bcl-links-block/links-block.html.twig

@@ -7,6 +7,7 @@
     - options ["vertical", "horizontal"]
   - title: (string) (default: "")
   - title_tag: (string) (default: "h2")
+  - title_attributes (drupal attrs)
   - links (array of link objects) (default: [])
 #}
 
@@ -14,6 +15,8 @@
 {% set _variant = variant|default("vertical") %}
 {% set _title = title|default("") %}
 {% set _title_tag = title_tag|default("h2") %}
+{% set _title_classes = ['fw-bold', 'pb-3', 'mb-3', 'border-bottom'] %}
+{% set _title_attributes = title_attributes ?: create_attribute().addClass(_title_classes) %}
 {% set _links = links|default([])%}
 
 {% if attributes is empty %}
@@ -28,8 +31,11 @@
   {{ attributes }}
 >
   {% if _title is not empty %}
-    {% set _title_classes = 'fw-bold pb-3 mb-3 border-bottom' %}
-    <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
+    {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+      title: _title,
+      title_tag: _title_tag,
+      attributes: _title_attributes,
+    } only %}
   {% endif %}
   {% if _links is not empty and _links is iterable %}
     <ul class="ps-0 mb-0">

package/templates/bcl-listing/listing.html.twig

@@ -5,6 +5,7 @@
   [ default-1-col, highlight-1-col, default-2-col, default-3-col, highlight-2-col, highlight-3-col ]
   - title: (string) (default: "")
   - title_tag: (string) (default: "h2")
+  - title_attributes (drupal attrs)
   - items: (array of objects of type card)
   - link: (object of type link)
   - alignment: (string) (default: '') options:
@@ -15,6 +16,7 @@
 {% set _variant = variant|default('default-1-col') %}
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _alignment = alignment|default('') %}
 {% set _link = link|default({}) %}
 {% set _classes = ['bcl-listing', 'bcl-listing--' ~ _variant] %}
@@ -35,10 +37,11 @@
 <div {{ attributes }}>
 
 {% if _title is not empty %}
-  {% set _title_classes = 'fw-bold mb-4' %}
-  <{{ _title_tag }} class="{{ _title_classes }}">
-    {{- _title -}}
-  </{{ _title_tag }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_attributes: _title_attributes,
+  } only %}
 {% endif %}
 
 {% if _items is not empty %}

package/templates/bcl-project/project-lists.html.twig

@@ -0,0 +1,67 @@
+{% spaceless %}
+
+
+{#
+  Parameters:
+  - title (heading object) (default: {})
+  - items (array) (default: [])
+    {
+      title: (heading object),
+      content: [
+        description list object
+      ]
+    }
+#}
+
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h3') %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
+{% set _items = items|default([]) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set _title_classes = ['fw-bold', 'my-4-5'] %}
+{% set _title_attributes = _title_attributes.addClass(_title_classes) %}
+
+<div
+  {{ attributes }}
+>
+{% if _title is not empty %}
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    attributes: _title_attributes,
+  } only %}
+{% endif %}
+{% if _items is defined and _items is not empty %}
+  {% for _item in _items %}
+    {% if _item.title is not empty %}
+      {% set _item_title_attributes = _item.title_attributes ?: create_attribute() %}
+      {% set _item_title_attributes = _item_title_attributes.addClass(['fw-bold', 'mb-3']) %}
+      {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+        title: _item.title,
+        title_tag: _item.title_tag|default('h4'),
+        attributes: _item_title_attributes,
+      } only %}
+    {% endif %}
+    {% for _list in _item.content %}
+      {% if _list.attributes is empty %}
+        {% set _list = _list|merge({
+          attributes: create_attribute()
+        }) %}
+      {% endif %}
+      {% if not loop.last %}
+        {% set _list = _list|merge({
+            attributes: _list.attributes.addClass(['border-bottom', 'pb-3'])
+          })
+        %}
+      {% endif %}
+      {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with _list only %}
+    {% endfor %}
+  {% endfor %}
+{% endif %}
+</div>
+
+{% endspaceless %}