@openeuropa/bcl-theme-default 1.11.0 → 1.13.0

package/src/scss/_pagination-v2.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // Pagination V2 overrides scoped to `.pagination-v2`.
 .pagination-v2 {
   // Keep the navigation landmark borderless to match Bootstrap defaults.
@@ -66,7 +67,7 @@
         .page-link {
           @extend .fw-normal;
           border: 1px solid $gray-400;
-          padding: map-get($spacers, "1-5") map-get($spacers, "2-5");
+          padding: map.get($spacers, "1-5") map.get($spacers, "2-5");
           @include focused-item();
           &:hover {
             @extend .text-decoration-none;

package/src/scss/_pagination.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 /* stylelint-disable no-descending-specificity */
 .pagination {
   flex-wrap: wrap;
@@ -33,7 +34,7 @@
     border-bottom: 2px solid transparent;
     color: $dark;
     font-weight: $font-weight-bold;
-    padding: map-get($spacers, 3);
+    padding: map.get($spacers, 3);
     text-transform: uppercase;
     white-space: nowrap;
   }
@@ -43,7 +44,7 @@
     border-color: $primary;
     border-width: 2px;
     color: $dark;
-    padding-bottom: calc(map-get($spacers, 3) - 1px);
+    padding-bottom: calc(map.get($spacers, 3) - 1px);
   }
 
   .page-item:first-child .page-link {

package/src/scss/_search-form.scss

@@ -1,14 +1,15 @@
+@use "sass:map";
 @use "sass:math";
 
 // Search form Spacers
 $search-spacers: (
-  "icon-spacer-left": map-get($spacers, 3),
-  "icon-spacer-top": math.div(($form-select-height - map-get($icon, "xs")), 2),
+  "icon-spacer-left": map.get($spacers, 3),
+  "icon-spacer-top": math.div(($form-select-height - map.get($icon, "xs")), 2),
   "icon-spacer-top-md": math.div(
-      ($form-select-height-md - map-get($icon, "xs")),
+      ($form-select-height-md - map.get($icon, "xs")),
       2
     ),
-  "submit-spacer-right": map-get($spacers, 3),
+  "submit-spacer-right": map.get($spacers, 3),
 );
 
 .bcl-search-form {
@@ -36,7 +37,7 @@ $search-spacers: (
       border-bottom-right-radius: 0;
     }
     .bcl-search-form__submit {
-      padding-right: map-get($search-spacers, "submit-spacer-right");
+      padding-right: map.get($search-spacers, "submit-spacer-right");
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
       &:focus-visible {
@@ -62,15 +63,15 @@ $search-spacers: (
   }
   .bcl-search-form__icon {
     position: absolute;
-    top: map-get($search-spacers, "icon-spacer-top");
-    left: map-get($search-spacers, "icon-spacer-left");
+    top: map.get($search-spacers, "icon-spacer-top");
+    left: map.get($search-spacers, "icon-spacer-left");
   }
 }
 
 @include media-breakpoint-up(md) {
   .bcl-search-form {
     .bcl-search-form__icon {
-      top: map-get($search-spacers, "icon-spacer-top-md");
+      top: map.get($search-spacers, "icon-spacer-top-md");
     }
   }
 }

package/src/scss/_tabs.scss

@@ -1,9 +1,10 @@
+@use "sass:map";
 // stylelint-disable no-descending-specificity
 .nav {
   &.bcl__nav {
     border: none;
     .nav-link {
-      padding: map-get($spacers, 3);
+      padding: map.get($spacers, 3);
       color: $black;
       border: none;
       border-radius: 0;
@@ -22,7 +23,7 @@
         background: transparent;
         border-top: none;
         border-right: none;
-        border-bottom: map-get($border-widths, 2) solid $primary;
+        border-bottom: map.get($border-widths, 2) solid $primary;
         border-left: none;
         &:focus-visible {
           outline-color: $primary;
@@ -67,7 +68,7 @@
     }
     .nav-link {
       margin-bottom: 0;
-      border-bottom: map-get($border-widths, 1) solid $gray-300;
+      border-bottom: map.get($border-widths, 1) solid $gray-300;
       &.active {
         border-bottom: none;
       }

package/src/scss/_timeline.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 /* stylelint-disable declaration-no-important */
 // timeline
 .bcl-timeline {
@@ -9,8 +10,8 @@
 
   > li {
     position: relative;
-    padding-bottom: map-get($spacers, "4-5");
-    padding-left: calc(22px + map-get($spacers, 3));
+    padding-bottom: map.get($spacers, "4-5");
+    padding-left: calc(22px + map.get($spacers, 3));
 
     &::before {
       content: "";

package/src/scss/base/_utilities.scss

@@ -1,33 +1,34 @@
-$utilities: map-merge(
+@use "sass:map";
+$utilities: map.merge(
   $utilities,
   (
-    "background-color": map-merge(
-        map-get($utilities, "background-color"),
+    "background-color": map.merge(
+        map.get($utilities, "background-color"),
         (
-          values: map-merge(
-              map-get(map-get($utilities, "background-color"), "values"),
+          values: map.merge(
+              map.get(map.get($utilities, "background-color"), "values"),
               (
                 date: $date,
               )
             ),
         )
       ),
-    "width": map-merge(
-        map-get($utilities, "width"),
+    "width": map.merge(
+        map.get($utilities, "width"),
         (
-          values: map-merge(
-              map-get(map-get($utilities, "width"), "values"),
+          values: map.merge(
+              map.get(map.get($utilities, "width"), "values"),
               (
                 min-content: min-content,
               )
             ),
         )
       ),
-    "flex": map-merge(
-        map-get($utilities, "flex"),
+    "flex": map.merge(
+        map.get($utilities, "flex"),
         (
-          values: map-merge(
-              map-get(map-get($utilities, "flex"), "values"),
+          values: map.merge(
+              map.get(map.get($utilities, "flex"), "values"),
               (
                 1: 1,
                 end-100: 1 0 100%,
@@ -36,11 +37,11 @@ $utilities: map-merge(
         )
       ),
     // Extend rounded-top utility.
-    "max-width": map-merge(
-        map-get($utilities, "max-width"),
+    "max-width": map.merge(
+        map.get($utilities, "max-width"),
         (
-          values: map-merge(
-              map-get(map-get($utilities, "max-width"), "values"),
+          values: map.merge(
+              map.get(map.get($utilities, "max-width"), "values"),
               (
                 date: 10rem,
                 col-date: calc(10rem + var(--#{$variable-prefix}gutter-x)),
@@ -50,37 +51,37 @@ $utilities: map-merge(
         )
       ),
     // Create responsive classes for padding
-    "padding": map-merge(
-        map-get($utilities, "padding"),
+    "padding": map.merge(
+        map.get($utilities, "padding"),
         (
           responsive: true,
         )
       ),
     // Create responsive classes for borders
-    "border": map-merge(
-        map-get($utilities, "border"),
+    "border": map.merge(
+        map.get($utilities, "border"),
         (
           responsive: true,
         )
       ),
-    "border-top": map-merge(
-        map-get($utilities, "border-top"),
+    "border-top": map.merge(
+        map.get($utilities, "border-top"),
         (
           responsive: true,
         )
       ),
-    "border-bottom": map-merge(
-        map-get($utilities, "border-bottom"),
+    "border-bottom": map.merge(
+        map.get($utilities, "border-bottom"),
         (
           responsive: true,
         )
       ),
     // Create medium font weight class
-    "font-weight": map-merge(
-        map-get($utilities, "font-weight"),
+    "font-weight": map.merge(
+        map.get($utilities, "font-weight"),
         (
-          values: map-merge(
-              map-get(map-get($utilities, "font-weight"), "values"),
+          values: map.merge(
+              map.get(map.get($utilities, "font-weight"), "values"),
               (
                 medium: 500,
               )

package/src/scss/base/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // Colors variables
 $lighter: $gray-100;
 $date: #1698af;
@@ -10,7 +11,7 @@ $cyan-50: tint-color($cyan, 90%);
 $zindex-dropdown: 1055;
 
 // Override theme-color "light"
-$theme-colors: map-merge(
+$theme-colors: map.merge(
   $theme-colors,
   (
     "light": $light,
@@ -34,11 +35,11 @@ $custom-cyans: (
   "cyan-50": $cyan-50,
 );
 
-$blues: map-merge($blues, $custom-blues);
-$reds: map-merge($reds, $custom-reds);
-$yellows: map-merge($yellows, $custom-yellows);
-$greens: map-merge($greens, $custom-greens);
-$cyans: map-merge($cyans, $custom-cyans);
+$blues: map.merge($blues, $custom-blues);
+$reds: map.merge($reds, $custom-reds);
+$yellows: map.merge($yellows, $custom-yellows);
+$greens: map.merge($greens, $custom-greens);
+$cyans: map.merge($cyans, $custom-cyans);
 
 // Custom color variables
 $ec-blue: #17458f;
@@ -62,7 +63,7 @@ $spacers-extended: (
   "4-75": $spacer * 2.5,
 );
 
-$spacers: map-merge($spacers, $spacers-extended);
+$spacers: map.merge($spacers, $spacers-extended);
 $gutters: $spacers;
 $enable-negative-margins: true;
 $negative-spacers: negativify-map($spacers);

package/src/scss/color_scheme/_alert.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // Color scheme - Alert
 
 // No longer using $alert-bg-scale, $alert-border-scale, $alert-color-scale variables because they are deprecated in bootstrap 5.3.x
@@ -10,7 +11,7 @@
   $text: shift-color($value, 40%);
 
   @if (contrast-ratio($bg, $text) < $min-contrast-ratio) {
-    $text: mix($value, color-contrast($bg), math.abs(40%));
+    $text: color.mix($value, color-contrast($bg), math.abs(40%));
   }
 
   .alert-#{$color} {

package/src/scss/color_scheme/_badges.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // Color scheme - List Group
 
 @mixin generate-badges($color, $value) {
@@ -49,14 +50,14 @@
           @include box-shadow(
             $btn-box-shadow,
             0 0 0 $btn-focus-width
-              rgba(mix(color-contrast($value), $value, 15%), 0.5)
+              rgba(color.mix(color-contrast($value), $value, 15%), 0.5)
           );
         } @else {
           box-shadow: 0
             0
             0
             $btn-focus-width
-            rgba(mix(color-contrast($value), $value, 15%), 0.5);
+            rgba(color.mix(color-contrast($value), $value, 15%), 0.5);
         }
       }
     }

package/src/scss/color_scheme/_list_group.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // Color scheme - List Group
 
 @use "sass:math";
@@ -8,7 +9,7 @@
   $border: shift-color($value, 40%);
 
   @if (contrast-ratio($bg, $text) < $min-contrast-ratio) {
-    $text: mix($value, color-contrast($bg), math.abs(40%));
+    $text: color.mix($value, color-contrast($bg), math.abs(40%));
   }
 
   .list-group-item-#{$color} {

package/src/scss/color_scheme/_utilities.scss

@@ -2,12 +2,17 @@
 
 @mixin generate-utilities($color, $value) {
   $color-rgb: to-rgb($value);
+  $important: null;
+
+  @if $enable-important-utilities {
+    $important: !important;
+  }
+
   &.text-bg-#{$color},
   .text-bg-#{$color} {
-    color: color-contrast($value)
-      if($enable-important-utilities, !important, null);
+    color: color-contrast($value) $important;
     background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1))
-      if($enable-important-utilities, !important, null);
+      $important;
   }
 
   &.bg-#{$color},
@@ -25,11 +30,17 @@
     @if $link-shade-percentage != 0 {
       &:hover,
       &:focus {
-        color: if(
-          color-contrast($value) == $color-contrast-light,
-          shade-color($value, $link-shade-percentage),
-          tint-color($value, $link-shade-percentage)
-        ) !important; // stylelint-disable-line declaration-no-important
+        @if color-contrast($value) == $color-contrast-light {
+          color: shade-color(
+            $value,
+            $link-shade-percentage
+          ) !important; // stylelint-disable-line declaration-no-important
+        } @else {
+          color: tint-color(
+            $value,
+            $link-shade-percentage
+          ) !important; // stylelint-disable-line declaration-no-important
+        }
       }
     }
   }

package/src/scss/oe-bcl-default.scss

@@ -78,7 +78,6 @@
 @import "spinners";
 @import "badge";
 @import "multiselect";
-@import "multiselect-2";
 @import "mega-menu";
 @import "breadcrumb";
 @import "banners";

package/templates/{bcl-banner → bcl-twig-templates/templates/bcl-banner}/banner.html.twig

@@ -7,6 +7,7 @@
   - link: (link object) (default: {})
   - image: (string) <img> tag
   - copyright: (string) (default: '')
+  - copyright_label: (string) (default: '')
   - shade: (boolean) (default: false)
   - hero: (boolean) (default: false)
   - full_width: (boolean) (default: false)
@@ -23,6 +24,7 @@
 {% set _link = link|default({}) %}
 {% set _image = image|default('') %}
 {% set _copyright = copyright|default('') %}
+{% set _copyright_label = copyright_label|default('') %}
 {% set _shade = shade ?? false %}
 {% set _hero = hero ?? false %}
 {% set _full_width = full_width ?? false %}
@@ -93,6 +95,11 @@
   </div>{# -#}
 </div>
   {%- if _copyright is not empty -%}
-    <div class="bcl-copyright">{{- _copyright -}}</div>
+    <div class="bcl-copyright">
+      {%- if _copyright_label is not empty -%}
+        <span class="visually-hidden">{{- _copyright_label }} </span>
+      {%- endif -%}
+      {{- _copyright -}}
+    </div>
   {%- endif -%}
 {#--#}

package/templates/{bcl-card → bcl-twig-templates/templates/bcl-card}/card.html.twig

@@ -23,6 +23,7 @@
       position (string)
     }
   - image_copyright (string) (default: '')
+  - image_copyright_label (string) (default: '')
   - date (date block object) (default: {})
   - variant (string) (default: '')
   - horizontal (boolean) (default: false)
@@ -59,6 +60,26 @@
 {% set _content = content|default('') %}
 {% set _image = image|default({}) %}
 {% set _image_copyright = image_copyright|default('') %}
+{% set _image_copyright_label = image_copyright_label|default('') %}
+{% macro image_figure(image, img_class, copyright, copyright_label) %}
+  <figure class="m-0 bcl-card__image-wrapper">
+    <img
+      src="{{ image.path }}"
+      alt="{{ image.alt }}"
+      class="{{ img_class }}"
+    >
+    {%- if copyright is not empty %}
+      <figcaption class="bcl-card__image-footer">
+        <div class="bcl-copyright">
+          {%- if copyright_label is not empty -%}
+            <span class="visually-hidden">{{- copyright_label }} </span>
+          {%- endif -%}
+          {{- copyright -}}
+        </div>
+      </figcaption>
+    {%- endif %}
+  </figure>
+{% endmacro %}
 {% set _date = date|default({}) %}
 {% set _variant = variant|default('') %}
 {% set _horizontal = horizontal ?? false %}
@@ -157,16 +178,7 @@
       {%- include '@oe-bcl/bcl-date-block/date-block.html.twig' with _date only %}
     {%- endblock %}
   {%- elseif _image is not empty and _image.position != "bottom" -%}
-    <img
-      src="{{ _image.path }}"
-      alt="{{ _image.alt }}"
-      class="{{ _img_class }}"
-    >
-    {%- if _image_copyright is not empty %}
-      <div class="bcl-card__image-footer">
-        <div class="bcl-copyright">{{- _image_copyright -}}</div>
-      </div>
-    {%- endif %}
+    {{- _self.image_figure(_image, _img_class, _image_copyright, _image_copyright_label) }}
   {%- endif %}
 {% if _horizontal and (_image is not empty or _date is not empty) -%}
   </div>
@@ -261,16 +273,7 @@
     {%- if _horizontal -%}
     <div class="col-4">
     {%- endif -%}
-    <img
-      src="{{ _image.path }}"
-      alt="{{ _image.alt }}"
-      class="{{ _img_class }}"
-    >
-    {%- if _image_copyright is not empty %}
-      <div class="bcl-card__image-footer">
-        <div class="bcl-copyright">{{- _image_copyright -}}</div>
-      </div>
-    {%- endif %}
+    {{- _self.image_figure(_image, _img_class, _image_copyright, _image_copyright_label) }}
     {%- if _horizontal -%}
     </div>
     {%- endif %}

package/templates/{bcl-carousel → bcl-twig-templates/templates/bcl-carousel}/carousel.html.twig

@@ -14,6 +14,7 @@
       caption_classes (string)
       caption_title (string)
       copyright (string)
+      copyright_label (string)
       interval (integer) (default: 0)
     }
   ],
@@ -119,36 +120,43 @@
     {% endif %}
     >
     {%- if _item.image is defined and _item.image is not empty %}
-      {{- _item.image }}
-    {%- endif %}
-    {%- if (_item.caption is defined and _item.caption is not empty) or (_item.link is defined and _item.link is not empty) or (_item.caption_title is defined and _item.caption_title is not empty) %}
-      {%- set _caption_classes = 'carousel-caption' %}
-      {%- if _item.caption is not empty and _item.link is empty %}
-        {%- set _caption_classes = _caption_classes ~ ' d-none d-md-block' %}
-      {%- endif -%}
-      <div
-        class="{{ _caption_classes }}"
-      >
-        {%- if _item.caption is not empty or _item.caption_title is not empty %}
-          {%- if _item.caption_classes is defined and _item.caption_classes is not empty -%}
-            <div class="{{ _item.caption_classes }}">
-          {%- endif %}
-          {%- if _item.caption_title is not empty -%}
-            <div class="fs-5">{{ _item.caption_title }}</div>
-          {%- endif %}
-            {{- _item.caption -}}
-          {% if _item.caption_classes is defined and _item.caption_classes is not empty -%}
-            </div>
-          {%- endif %}
-        {%- endif %}
-        {%- if _item.link is defined and _item.link is not empty %}
-          {%- include '@oe-bcl/bcl-link/link.html.twig' with _item.link only %}
+      <figure class="m-0 h-100">
+        {{- _item.image }}
+        {%- if (_item.caption is defined and _item.caption is not empty) or (_item.link is defined and _item.link is not empty) or (_item.caption_title is defined and _item.caption_title is not empty) %}
+          {%- set _caption_classes = 'carousel-caption' %}
+          {%- if _item.caption is not empty and _item.link is empty %}
+            {%- set _caption_classes = _caption_classes ~ ' d-none d-md-block' %}
+          {%- endif -%}
+          <div
+            class="{{ _caption_classes }}"
+          >
+            {%- if _item.caption is not empty or _item.caption_title is not empty %}
+              {%- if _item.caption_classes is defined and _item.caption_classes is not empty -%}
+                <div class="{{ _item.caption_classes }}">
+              {%- endif %}
+              {%- if _item.caption_title is not empty -%}
+                <div class="fs-5">{{ _item.caption_title }}</div>
+              {%- endif %}
+                {{- _item.caption -}}
+              {% if _item.caption_classes is defined and _item.caption_classes is not empty -%}
+                </div>
+              {%- endif %}
+            {%- endif %}
+            {%- if _item.link is defined and _item.link is not empty %}
+              {%- include '@oe-bcl/bcl-link/link.html.twig' with _item.link only %}
+            {%- endif -%}
+          </div>
         {%- endif -%}
-      </div>
-    {%- endif -%}
-    {%- if _item.copyright is defined and _item.copyright is not empty -%}
-      <div class="bcl-copyright">{{- _item.copyright -}}</div>
-    {%- endif -%}
+        {%- if _item.copyright is defined and _item.copyright is not empty -%}
+          <figcaption class="bcl-copyright">
+            {%- if _item.copyright_label is defined and _item.copyright_label is not empty -%}
+              <span class="visually-hidden">{{- _item.copyright_label }} </span>
+            {%- endif -%}
+            {{- _item.copyright -}}
+          </figcaption>
+        {%- endif -%}
+      </figure>
+    {%- endif %}
     </div>
     {%- endfor %}
   {%- endif -%}

package/templates/{bcl-content-banner → bcl-twig-templates/templates/bcl-content-banner}/content-banner.html.twig

@@ -11,6 +11,7 @@
       options: ['md', 'lg', 'xl']
     - date: (date block object) (default: {})
     - copyright: (string) (default: '')
+    - copyright_label: (string) (default: '')
 
     Card inheritance
       - badges (badge[]) (default: [])
@@ -45,6 +46,7 @@
 {% set _action_bar = action_bar|default('') %}
 {% set _date = date|default({}) %}
 {% set _copyright = copyright|default('') %}
+{% set _copyright_label = copyright_label|default('') %}
 {%- set _action_bar_content -%}
   {%- block action_bar -%}
     {{ _action_bar }}
@@ -120,6 +122,7 @@
   extra_classes_header: 'bg-transparent pt-0 pb-0 border-0',
   extra_classes_body: _body_classes,
   image_copyright: _copyright,
+  image_copyright_label: _copyright_label,
   attributes: create_attribute().addClass(['bg-transparent', 'border-0']),
 } %}
 

package/templates/{bcl-featured-media → bcl-twig-templates/templates/bcl-featured-media}/featured-media.html.twig

@@ -10,6 +10,7 @@
   - poster_image: (string) (default: '')
   - content: (string) (default: '')
   - copyright: (string) (default: '')
+  - copyright_label: (string) (default: '')
   - wrapper_classes: (default: '')
   - force_wrapper (boolean) (default: false) - always render wrapper element
   - content_classes: (string) (default: '')
@@ -50,6 +51,7 @@
 {% set _poster_image = poster_image|default('') %}
 {% set _content = content|default('') %}
 {% set _copyright = copyright|default('') %}
+{% set _copyright_label = copyright_label|default('') %}
 {% set _wrapper_classes = wrapper_classes|default('') %}
 {% set _content_classes = content_classes|default('') %}
 {% set _read_more = read_more|default({}) %}
@@ -149,17 +151,19 @@
   {{- _image }}
 {%- endif %}
 
-{%- if _copyright is not empty -%}
-  <div class="bcl-copyright">{{- _copyright -}}</div>
-{%- endif -%}
-
-{%- if _content is not empty -%}
-  <figcaption
-    {% if _content_classes is not empty %}
-    class="{{ _content_classes }}"
-    {% endif %}
-  >
-    {{- _content -}}
+{%- if _copyright is not empty or _content is not empty -%}
+  <figcaption>
+    {%- if _content is not empty -%}
+      <div{% if _content_classes is not empty %} class="{{ _content_classes }}"{% endif %}>{{- _content -}}</div>
+    {%- endif -%}
+    {%- if _copyright is not empty -%}
+      <div class="bcl-copyright">
+        {%- if _copyright_label is not empty -%}
+          <span class="visually-hidden">{{- _copyright_label }} </span>
+        {%- endif -%}
+        {{- _copyright -}}
+      </div>
+    {%- endif -%}
   </figcaption>
 {%- endif -%}
 </figure>

package/templates/{bcl-gallery → bcl-twig-templates/templates/bcl-gallery}/gallery.html.twig

@@ -18,6 +18,7 @@ Parameters:
         caption (string)
         caption_title (string)
         copyright (string)
+        copyright_label (string)
       }
     ]
   - icon_path (string) (default: '')