@openeuropa/bcl-theme-default 1.1.0 → 1.2.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "OE - BCL theme default",
   "scripts": {
     "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
@@ -21,13 +21,13 @@
     "@ecl/resources-ec-logo": "3.7.1",
     "@ecl/resources-eu-logo": "3.7.1",
     "@ecl/resources-flag-icons": "3.7.1",
-    "@openeuropa/bcl-bootstrap": "^1.1.0",
-    "@openeuropa/bcl-builder": "^1.1.0",
-    "@openeuropa/bcl-twig-templates": "^1.1.0",
+    "@openeuropa/bcl-bootstrap": "^1.2.0",
+    "@openeuropa/bcl-builder": "^1.2.0",
+    "@openeuropa/bcl-twig-templates": "^1.2.0",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
-    "flag-icons": "6.6.6",
-    "glob": "10.0.0",
+    "flag-icons": "6.9.2",
+    "glob": "10.3.3",
     "npm-run-all": "4.1.5",
     "slim-select": "1.27.1"
   },
@@ -48,5 +48,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "d15fa3688c97c643617257d8ded6bfb6c2e73fee"
+  "gitHead": "e8750bd56d83523370a6a1f32f3cc5c0b14bdfca"
 }

package/src/scss/_badge.scss

@@ -59,11 +59,11 @@ a.badge {
           border-color: shade-color($value, 15%) !important;
         }
       }
-      &.bg-#{$color} {
+      &.text-bg-#{$color} {
         background-color: shade-color($value, 15%) !important;
       }
     }
-    &.badge.bg-#{$color} {
+    &.text-bg-#{$color} {
       &:focus {
         @if $enable-shadows {
           @include box-shadow(

package/src/scss/_banners.scss

@@ -28,6 +28,31 @@
   }
 }
 
+.container {
+  .bcl-content-banner {
+    > .container {
+      > .card {
+        margin: 0;
+        z-index: 2;
+      }
+    }
+    &.bg-lighter {
+      position: relative;
+      &:after {
+        background: $lighter;
+        content: "";
+        height: 100%;
+        left: 50%;
+        position: absolute;
+        top: 0;
+        width: 100vw;
+        -webkit-transform: translateX(-50%);
+        transform: translateX(-50%);
+      }
+    }
+  }
+}
+
 .bcl-banner__content {
   padding: map-get($spacers, "4-75") map-get($spacers, "4-5");
   border-color: $banner-content-border-color;

package/src/scss/_card.scss

@@ -3,8 +3,7 @@
 }
 
 @each $color, $value in $theme-colors {
-  .card.bg-#{$color} {
-    color: color-contrast($value);
+  .card.text-bg-#{$color} {
     .card-header,
     .card-footer {
       border: none;

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

@@ -31,7 +31,7 @@
 {% if _outline %}
   {% set _classes = _classes|merge(['badge-outline-' ~ _background]) %}
 {% else %}
-  {% set _classes = _classes|merge(['bg-' ~ _background]) %}
+  {% set _classes = _classes|merge(['text-bg-' ~ _background]) %}
 {% endif %}
 
 {% if attributes is empty %}

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

@@ -82,7 +82,7 @@
   {% set _classes = _classes|merge(['text-' ~ _text_color]) %}
 {% endif %}
 {% if _variant is not empty %}
-  {% set _classes = _classes|merge(['bg-' ~ _variant]) %}
+  {% set _classes = _classes|merge(['text-bg-' ~ _variant]) %}
 {% endif %}
 {% if _border_variant is not empty %}
   {% set _classes = _classes|merge(['border-' ~ _border_variant]) %}

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

@@ -135,7 +135,7 @@
             <div class="{{ _item.caption_classes }}">
           {% endif %}
           {% if _item.caption_title is not empty %}
-            <p class="fs-5">{{ _item.caption_title }}</p>
+            <div class="fs-5">{{ _item.caption_title }}</div>
           {% endif %}
             {{- _item.caption -}}
           {% if _item.caption_classes is defined and _item.caption_classes is not empty %}

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

@@ -45,12 +45,12 @@
   <span class="d-flex flex-column pt-2">
     <span class="d-flex flex-column align-item-center justify-content-center bg-white border border-bottom-0 w-100 h-100 fs-5 text-uppercase">
       <span class="d-block">{{- _day ~ ' ' ~ _month ~ ((_end_day or _end_month) ? ' - ' ) -}}</span>
-      {%- if _end_day is not empty -%}
+      {%- if _end_day is not empty %}
         {{- _end_day -}}
-      {% endif %}
-      {% if _end_month is not empty %}
-        {{- _end_month -}}
-      {%- endif -%}
+      {% endif -%}
+      {%- if _end_month is not empty %}
+        {{- ' ' ~ _end_month -}}
+      {% endif -%}
     </span>
     <span class="bg-lighter border w-100 rounded-bottom py-1">
       {{- _year -}}

package/templates/bcl-featured-media/featured-media.html.twig

@@ -12,8 +12,12 @@
   - poster_image: (string) (default: '')
   - content: (string) (default: '')
   - wrapper_classes: (default: '')
+  - force_wrapper (boolean) (default: false) - always render wrapper element
   - content_classes: (string) (default: '')
   - read_more (object) (default: {})
+  - description_title (string) (default: '')
+  - description_title_tag (string) (default: 'h3')
+  - description_title_attributes (drupal attrs)
   - description (string) (default: '')
   - ratio: (string) (default: '16x9')
     - options ['1x1', '4x3', '16x9', '21x9']
@@ -40,6 +44,7 @@
 {% set _title_tag = title_tag|default('h2') %}
 {% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
+{% set _force_wrapper = force_wrapper ?? false %}
 {% set _with_text = with_text ?? false %}
 {% set _alignment = alignment|default('right') %}
 {% set _image = image|default('') %}
@@ -48,6 +53,9 @@
 {% set _wrapper_classes = wrapper_classes|default('') %}
 {% set _content_classes = content_classes|default('') %}
 {% set _read_more = read_more|default({}) %}
+{% set _description_title = description_title|default('') %}
+{% set _description_title_tag = description_title_tag|default('h3') %}
+{% set _description_title_attributes = description_title_attributes ?: create_attribute() %}
 {% set _description = description|default('') %}
 {% set _ratio = ratio|default('16x9') %}
 {% set _sources = sources|default([]) %}
@@ -65,10 +73,6 @@
   {% set attributes = create_attribute() %}
 {% endif %}
 
-{% if _with_text %}
-  {% set _title_attributes = _title_attributes.addClass(['fw-bold', 'mb-4']) %}
-{% endif %}
-
 {% set attributes = attributes.addClass(["rounded", "overflow-hidden"]) %}
 
 {% if _image is not empty %}
@@ -80,8 +84,10 @@
   {% endif %}
 {% endif %}
 
-{% if _with_text %}
+{% if _with_text or _force_wrapper %}
 <div class="{{ _classes }}">
+{% endif %}
+{% if _with_text %}
   <div class="row">
 {% endif %}
 
@@ -96,6 +102,13 @@
 
 {% if _with_text %}
   <div class="{{ _col_classes }} order-{{ _alignment == "right" ? '1' : '2' }}">
+    {%- if _description_title is not empty -%}
+      {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+        title: _description_title,
+        title_tag: _description_title_tag,
+        attributes: _description_title_attributes,
+      } only %}
+    {%- endif -%}
     {{- _description|default('') -}}
 
     {% if _read_more is not empty %}
@@ -151,6 +164,8 @@
 {% if _with_text %}
     </div>
   </div>
+{% endif %}
+{% if _with_text or _force_wrapper %}
 </div>
 {% endif %}
 

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

@@ -123,7 +123,7 @@
 {% endif %}
 {% if _antispam is not empty %}
   <div class="mt-4 mb-2">
-    <div class="bg-light">
+    <div class="text-bg-light">
       {{ _antispam }}
     </div>
   </div>

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

@@ -48,7 +48,7 @@ Parameters:
   {% if _item.caption is not empty or item.caption_title is not empty %}
     <div class="bcl-gallery__item-caption">
     {% if _item.caption_title is not empty %}
-      <p class="fs-5">{{ _item.caption_title }}</p>
+      <div class="fs-5">{{ _item.caption_title }}</div>
     {% endif %}
     {% if _item.caption is not empty %}
       <div class="bcl-gallery__item-description">

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

@@ -78,11 +78,11 @@
   {{ attributes }}
 >
   {%- if _icon_position == 'before' and _icon_markup is defined -%}
-    {{ _icon_markup|raw }}
+    {{ _icon_markup }}
   {%- endif -%}
   {{- _label -}}
   {%- if _icon_position == 'after' and _icon_markup is defined -%}
-    {{ _icon_markup|raw }}
+    {{ _icon_markup }}
   {%- endif -%}
 </a>
 

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

@@ -23,7 +23,7 @@
 {% endif %}
 
 {% if _variant is not empty %}
-  {% set _classes = _classes|merge(['bg-' ~ _variant]) %}
+  {% set _classes = _classes|merge(['text-bg-' ~ _variant]) %}
 {% endif %}
 
 {% if attributes is empty %}

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

@@ -11,7 +11,7 @@
 {% set _content = content|default('') %}
 {% set _button = button|default({}) %}
 
-{% set _classes = ['bcl-subscription-block', 'bg-light', 'px-4-5', 'pt-4', 'pb-4-5'] %}
+{% set _classes = ['bcl-subscription-block', 'text-bg-light', 'px-4-5', 'pt-4', 'pb-4-5'] %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}