@openeuropa/bcl-theme-default 1.10.11 → 1.12.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.scss

@@ -4,12 +4,12 @@
 @import "@openeuropa/bcl-bootstrap/scss/maps";
 @import "@openeuropa/bcl-bootstrap/scss/mixins";
 
-@import "@openeuropa/bcl-theme-default/src/scss/color_scheme/background";
-@import "@openeuropa/bcl-theme-default/src/scss/color_scheme/text";
-@import "@openeuropa/bcl-theme-default/src/scss/color_scheme/link";
+@import "color_scheme/background";
+@import "color_scheme/text";
+@import "color_scheme/link";
 
-@import "@openeuropa/bcl-theme-default/src/scss/color_scheme/alert";
-@import "@openeuropa/bcl-theme-default/src/scss/color_scheme/buttons";
-@import "@openeuropa/bcl-theme-default/src/scss/color_scheme/list_group";
-@import "@openeuropa/bcl-theme-default/src/scss/color_scheme/utilities";
-@import "@openeuropa/bcl-theme-default/src/scss/color_scheme/badges";
+@import "color_scheme/alert";
+@import "color_scheme/buttons";
+@import "color_scheme/list_group";
+@import "color_scheme/utilities";
+@import "color_scheme/badges";

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

@@ -2,7 +2,7 @@
 @import "@openeuropa/bcl-bootstrap/scss/functions";
 
 // Base theme colors
-@import "@openeuropa/bcl-theme-default/src/scss/base/colors";
+@import "base/colors";
 
 // Configuration Methods Maps and Mixins
 @import "@openeuropa/bcl-bootstrap/scss/variables";
@@ -10,7 +10,7 @@
 @import "@openeuropa/bcl-bootstrap/scss/mixins";
 
 // Custom variables
-@import "@openeuropa/bcl-theme-default/src/scss/base/variables";
+@import "base/variables";
 
 @import "@openeuropa/bcl-bootstrap/scss/utilities";
 
@@ -49,42 +49,42 @@
 
 // Helpers
 @import "@openeuropa/bcl-bootstrap/scss/helpers";
-@import "@openeuropa/bcl-theme-default/src/scss/base/layout";
-@import "@openeuropa/bcl-theme-default/src/scss/base/utilities";
+@import "base/layout";
+@import "base/utilities";
 
 // Utilities
 @import "@openeuropa/bcl-bootstrap/scss/utilities/api";
 
 // BCL mixins
-@import "@openeuropa/bcl-theme-default/src/scss/base/mixins";
+@import "base/mixins";
 
 // Custom styles
-@import "@openeuropa/bcl-theme-default/src/scss/accordion";
-@import "@openeuropa/bcl-theme-default/src/scss/alert";
-@import "@openeuropa/bcl-theme-default/src/scss/button";
-@import "@openeuropa/bcl-theme-default/src/scss/blockquote";
-@import "@openeuropa/bcl-theme-default/src/scss/card";
-@import "@openeuropa/bcl-theme-default/src/scss/collapse";
-@import "@openeuropa/bcl-theme-default/src/scss/circular-progress-bar";
-@import "@openeuropa/bcl-theme-default/src/scss/description_list";
-@import "@openeuropa/bcl-theme-default/src/scss/reset";
-@import "@openeuropa/bcl-theme-default/src/scss/header";
-@import "@openeuropa/bcl-theme-default/src/scss/footer";
-@import "@openeuropa/bcl-theme-default/src/scss/tabs";
-@import "@openeuropa/bcl-theme-default/src/scss/icon";
-@import "@openeuropa/bcl-theme-default/src/scss/search-form";
-@import "@openeuropa/bcl-theme-default/src/scss/input";
-@import "@openeuropa/bcl-theme-default/src/scss/spinners";
-@import "@openeuropa/bcl-theme-default/src/scss/badge";
-@import "@openeuropa/bcl-theme-default/src/scss/multiselect";
-@import "@openeuropa/bcl-theme-default/src/scss/multiselect-2";
-@import "@openeuropa/bcl-theme-default/src/scss/mega-menu";
-@import "@openeuropa/bcl-theme-default/src/scss/breadcrumb";
-@import "@openeuropa/bcl-theme-default/src/scss/banners";
-@import "@openeuropa/bcl-theme-default/src/scss/timeline";
-@import "@openeuropa/bcl-theme-default/src/scss/inpage-navigation";
-@import "@openeuropa/bcl-theme-default/src/scss/language-list";
-@import "@openeuropa/bcl-theme-default/src/scss/carousel";
-@import "@openeuropa/bcl-theme-default/src/scss/gallery";
-@import "@openeuropa/bcl-theme-default/src/scss/pagination";
-@import "@openeuropa/bcl-theme-default/src/scss/pagination-v2";
+@import "accordion";
+@import "alert";
+@import "button";
+@import "blockquote";
+@import "card";
+@import "collapse";
+@import "copyright";
+@import "circular-progress-bar";
+@import "description_list";
+@import "reset";
+@import "header";
+@import "footer";
+@import "tabs";
+@import "icon";
+@import "search-form";
+@import "input";
+@import "spinners";
+@import "badge";
+@import "multiselect";
+@import "mega-menu";
+@import "breadcrumb";
+@import "banners";
+@import "timeline";
+@import "inpage-navigation";
+@import "language-list";
+@import "carousel";
+@import "gallery";
+@import "pagination";
+@import "pagination-v2";

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

@@ -6,6 +6,7 @@
   - description: (string) (default: '')
   - link: (link object) (default: {})
   - image: (string) <img> tag
+  - copyright: (string) (default: '')
   - shade: (boolean) (default: false)
   - hero: (boolean) (default: false)
   - full_width: (boolean) (default: false)
@@ -21,6 +22,7 @@
 {% set _description = description|default('') %}
 {% set _link = link|default({}) %}
 {% set _image = image|default('') %}
+{% set _copyright = copyright|default('') %}
 {% set _shade = shade ?? false %}
 {% set _hero = hero ?? false %}
 {% set _full_width = full_width ?? false %}
@@ -90,4 +92,7 @@
     </div>{# -#}
   </div>{# -#}
 </div>
+  {%- if _copyright is not empty -%}
+    <div class="bcl-copyright">{{- _copyright -}}</div>
+  {%- endif -%}
 {#--#}

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

@@ -22,6 +22,7 @@
       alt (string),
       position (string)
     }
+  - image_copyright (string) (default: '')
   - date (date block object) (default: {})
   - variant (string) (default: '')
   - horizontal (boolean) (default: false)
@@ -57,6 +58,7 @@
 {% set _text = text|default({}) %}
 {% set _content = content|default('') %}
 {% set _image = image|default({}) %}
+{% set _image_copyright = image_copyright|default('') %}
 {% set _date = date|default({}) %}
 {% set _variant = variant|default('') %}
 {% set _horizontal = horizontal ?? false %}
@@ -132,7 +134,11 @@
     {%- set _img_class = _img_class ~ ' rounded-' ~ _image.rounded %}
   {%- elseif _horizontal %}
     {%- if attributes.hasClass('border-0') %}
-      {%- set _img_class = _img_class ~ ' rounded-1' %}
+      {%- if image_copyright is not empty %}
+        {%- set _img_class = _img_class ~ ' rounded-top-1' %}
+      {%- else %}
+        {%- set _img_class = _img_class ~ ' rounded-1' %}
+      {%- endif %}
     {%- else %}
       {%- set _img_class = _img_class ~ ' rounded-0 rounded-start' %}
     {%- endif %}
@@ -156,6 +162,11 @@
       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 %}
   {%- endif %}
 {% if _horizontal and (_image is not empty or _date is not empty) -%}
   </div>
@@ -255,6 +266,11 @@
       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 %}
     {%- if _horizontal -%}
     </div>
     {%- endif %}

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

@@ -8,14 +8,15 @@
   - dark (boolean) (default: false)
   - active_item (integer) (default: 1)
   - items (object[]) format: [
-     {
+    {
       image: (string) <img> tag
       caption (string)
       caption_classes (string)
       caption_title (string)
+      copyright (string)
       interval (integer) (default: 0)
-     }
-   ],
+    }
+  ],
   - fade (boolean) (default: false)
   - with_controls (boolean) (default: true)
   - prev_label (string) (default: '')
@@ -145,6 +146,9 @@
         {%- endif -%}
       </div>
     {%- endif -%}
+    {%- if _item.copyright is defined and _item.copyright is not empty -%}
+      <div class="bcl-copyright">{{- _item.copyright -}}</div>
+    {%- endif -%}
     </div>
     {%- endfor %}
   {%- endif -%}

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

@@ -10,6 +10,7 @@
     - image_size: (string) (default: 'md')
       options: ['md', 'lg', 'xl']
     - date: (date block object) (default: {})
+    - copyright: (string) (default: '')
 
     Card inheritance
       - badges (badge[]) (default: [])
@@ -43,6 +44,7 @@
 {% set _image_size = image_size|default('md') %}
 {% set _action_bar = action_bar|default('') %}
 {% set _date = date|default({}) %}
+{% set _copyright = copyright|default('') %}
 {%- set _action_bar_content -%}
   {%- block action_bar -%}
     {{ _action_bar }}
@@ -117,6 +119,7 @@
   horizontal_grid: _horizontal_classes,
   extra_classes_header: 'bg-transparent pt-0 pb-0 border-0',
   extra_classes_body: _body_classes,
+  image_copyright: _copyright,
   attributes: create_attribute().addClass(['bg-transparent', 'border-0']),
 } %}
 

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

@@ -9,6 +9,7 @@
   - image: (string) (default: '')
   - poster_image: (string) (default: '')
   - content: (string) (default: '')
+  - copyright: (string) (default: '')
   - wrapper_classes: (default: '')
   - force_wrapper (boolean) (default: false) - always render wrapper element
   - content_classes: (string) (default: '')
@@ -48,6 +49,7 @@
 {% set _image = image|default('') %}
 {% set _poster_image = poster_image|default('') %}
 {% set _content = content|default('') %}
+{% set _copyright = copyright|default('') %}
 {% set _wrapper_classes = wrapper_classes|default('') %}
 {% set _content_classes = content_classes|default('') %}
 {% set _read_more = read_more|default({}) %}
@@ -74,9 +76,8 @@
 {%- set attributes = attributes.addClass(["rounded", "overflow-hidden"]) %}
 
 {%- if _image is not empty %}
-  {%- set attributes = attributes.addClass(["d-inline-flex", "flex-wrap"]) %}
   {%- if _content_classes is not empty %}
-    {%- set _content_classes = _content_classes ~ ' flex-1 w-min-content' %}
+    {%- set _content_classes = _content_classes %}
   {%- else %}
     {%- set _content_classes = 'flex-1 w-min-content' %}
   {%- endif %}
@@ -148,6 +149,10 @@
   {{- _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 %}