@openeuropa/bcl-theme-default 1.1.1 → 1.2.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "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.1",
-    "@openeuropa/bcl-builder": "^1.1.1",
-    "@openeuropa/bcl-twig-templates": "^1.1.1",
+    "@openeuropa/bcl-bootstrap": "^1.2.1",
+    "@openeuropa/bcl-builder": "^1.2.1",
+    "@openeuropa/bcl-twig-templates": "^1.2.1",
     "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": "556ad7ce96c849c539c6722a4da68e1ae2822514"
+  "gitHead": "57c9a94fe7e7eb84afb69dcb10c1638b7d403483"
 }

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

@@ -3,6 +3,12 @@
 .bcl-banner {
   position: relative;
 
+  &.fixed-height {
+    .bcl-banner__image {
+      height: 150px;
+    }
+  }
+
   p {
     font-size: 1.125rem;
     font-weight: 500;
@@ -28,6 +34,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;
@@ -117,7 +148,7 @@
     z-index: 1;
     display: inline-block;
     padding: map-get($spacers, "4-5");
-    margin: 2.75rem auto;
+    margin: 2rem auto;
     border-radius: 4px;
     min-width: 540px;
   }
@@ -155,25 +186,31 @@
     }
   }
 }
-
-// Banners ratio
-@include media-breakpoint-up(lg) {
+@include media-breakpoint-up(md) {
   .bcl-banner {
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
-    min-height: 300px;
-
-    .container {
-      position: absolute;
+    &.fixed-height {
+      height: 330px;
+      .bcl-banner__image {
+        height: 100%;
+      }
     }
+  }
+}
 
-    &::before {
-      display: block;
-      width: 100%;
-      padding-top: 20%;
-      content: "";
+@include media-breakpoint-up(lg) {
+  .bcl-banner {
+    min-height: 300px;
+
+    &:not(.fixed-height) {
+      &::before {
+        display: block;
+        width: 1px;
+        padding-top: 20%;
+        content: "";
+      }
     }
 
     &.hero {

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/src/scss/_multiselect.scss

@@ -47,8 +47,8 @@ select.multi-select {
       font-weight: $badge-font-weight;
       line-height: 1;
       color: $badge-color;
-      text-align: center;
-      white-space: nowrap;
+      text-align: left;
+      white-space: normal;
       vertical-align: baseline;
       padding-right: map-get($spacers, "3-5");
       @include border-radius($badge-border-radius);
@@ -61,14 +61,14 @@ select.multi-select {
           content: "";
           display: inline-block;
           height: 1rem;
-          transform: scale(0.8);
+          transform: scale(0.8) translateY(50%);
           width: 1rem;
           padding: 15px;
           background-position: 50%;
           border-radius: 50%;
           position: absolute;
           right: 0;
-          bottom: -2px;
+          bottom: calc(50% - 3px);
         }
       }
     }

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-banner/banner.html.twig

@@ -11,6 +11,7 @@
   - shade: (boolean) (default: false)
   - hero: (boolean) (default: false)
   - full_width: (boolean) (default: false)
+  - fixed_height: (boolean) (default: false)
   - content_classes: (string) (default: '')
   - attributes (drupal attrs)
 #}
@@ -25,6 +26,7 @@
 {% set _shade = shade ?? false %}
 {% set _hero = hero ?? false %}
 {% set _full_width = full_width ?? false %}
+{% set _fixed_height = fixed_height ?? false %}
 {% set _content_classes = content_classes|default('') %}
 
 {% set _content_class = 'bcl-banner__content' %}
@@ -39,13 +41,27 @@
 
 {% set _title_attributes = _title_attributes.addClass(_title_classes) %}
 
-{% set _classes = [
-  'bcl-banner',
-  _shade ? 'shade',
-  _image and not _shade ? 'overlay',
-  _hero ? 'hero',
-  _full_width ? 'full-width' 
-  ] %}
+{% set _classes = ['bcl-banner'] %}
+
+{% if _shade %}
+  {% set _classes = _classes|merge(['shade']) %}
+{% endif %}
+
+{% if _image and not _shade %}
+  {% set _classes = _classes|merge(['overlay']) %}
+{% endif %}
+
+{% if _hero %}
+  {% set _classes = _classes|merge(['hero']) %}
+{% endif %}
+
+{% if _full_width %}
+  {% set _classes = _classes|merge(['full-width']) %}
+{% endif %}
+
+{% if _fixed_height %}
+  {% set _classes = _classes|merge(['fixed-height']) %}
+{% endif %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}

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() %}