@openeuropa/bcl-theme-default 0.21.0 → 0.23.1

package/src/scss/_badge.scss

@@ -16,84 +16,102 @@
     font-weight: 300;
     justify-content: center;
     align-items: center;
-    cursor: pointer;
     background: $white;
     border-radius: 50%;
+    border: none;
+    padding: 0;
     svg {
       width: 6px;
       height: 6px;
       margin: 0;
     }
   }
-  &.bg-primary {
-    .icon--close {
-      color: $primary;
-    }
-  }
-  &.bg-secondary {
-    .icon--close {
-      color: $secondary;
-    }
-  }
-  &.bg-success {
-    .icon--close {
-      color: $success;
-    }
-  }
-  &.bg-danger {
-    .icon--close {
-      color: $danger;
-    }
-  }
-  &.bg-dark {
-    .icon--close {
-      color: $dark;
-    }
-  }
-  &.bg-warning {
-    .icon--close {
-      color: $warning;
-      background: $black;
-    }
-  }
-  &.bg-info {
-    .icon--close {
-      color: $info;
-      background: $black;
-    }
-  }
-  &.bg-light {
-    .icon--close {
-      color: $light;
-      background: $black;
-    }
-  }
 }
 
-// Badges in headings and other text elements
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-a {
-  .badge {
-    font-size: 0.75em; // Default size in Bootstrap
+a.badge {
+  text-decoration: none;
+  &:focus-visible {
+    outline: none;
   }
 }
 
 @each $color, $value in $theme-colors {
-  .badge-outline-#{$color} {
-    border: $border-width solid $value;
+  .badge.bg-#{$color} a,
+  .badge.bg-#{$color} {
+    @if $color == light or $color == warning {
+      color: $black;
+    } @else {
+      color: $white;
+    }
+    .icon--close {
+      color: $value;
+      @if $color == light or $color == warning {
+        background: $black;
+      }
+    }
+  }
+  .badge-outline-#{$color} a {
     color: $value !important;
+  }
+  .badge-outline-#{$color} {
     background: transparent !important;
+    @if $color == light {
+      border: $border-width solid $light;
+      color: $light !important;
+    } @else {
+      border: $border-width solid $value;
+      color: $value !important;
+    }
     .icon--close {
       background: $value;
-      color: $white;
       @if $color == light {
         color: $black;
+      } @else {
+        color: $white;
+      }
+    }
+  }
+  a.badge {
+    &:focus-within,
+    &:active,
+    &:hover {
+      &.badge-outline-#{$color} {
+        @if $color == dark {
+          background-color: $light !important;
+          border-color: $black;
+        } @else if $color == light {
+          border-color: $white;
+          color: $white;
+          background: rgba($white, 0.3) !important;
+        } @else {
+          background-color: tint-color($value, 90%) !important;
+          border-color: shade-color($value, 15%) !important;
+        }
+      }
+      &.bg-#{$color} {
+        background-color: shade-color($value, 15%) !important;
+      }
+    }
+    &.badge.bg-#{$color} {
+      &:focus {
+        @if $enable-shadows {
+          @include box-shadow(
+            $btn-box-shadow,
+            0 0 0 $btn-focus-width
+              rgba(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);
+        }
+      }
+    }
+    &.badge-outline-#{$color} {
+      &:focus {
+        box-shadow: 0 0 0 $btn-focus-width rgba($value, 0.5);
       }
     }
   }

package/src/scss/_banners.scss

@@ -51,6 +51,16 @@
   }
 }
 
+@include media-breakpoint-down(md) {
+  .container {
+    .bcl-content-banner {
+      .container {
+        padding: 0;
+      }
+    }
+  }
+}
+
 @include media-breakpoint-up(md) {
   .bcl-banner {
     overflow: hidden;
@@ -128,6 +138,12 @@
         margin-left: 0;
       }
     }
+    .bcl-content-banner {
+      .card {
+        margin-right: -$container-padding-x;
+        margin-left: -$container-padding-x;
+      }
+    }
   }
 }
 

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/_inpage-navigation.scss

@@ -2,8 +2,7 @@
   top: map-get($spacers, 3); // needed for position-sticky
   background-color: $gray-100;
 
-  h5 {
-    font-weight: bold;
+  .bcl-heading {
     margin-bottom: 0;
     padding: map-get($spacers, "3-5");
     border-bottom: 1px solid $gray-300;

package/src/scss/_multiselect.scss

@@ -12,7 +12,8 @@ $multiselect-spacers: (
   "disabled-spacer": calc(map-get($spacers, 2) - 1px),
   "disabled-spacer-md": calc(map-get($spacers, 1) - 1px),
   "select-spacer": calc(map-get($spacers, 2) - 2px),
-  "select-spacer-md": calc(map-get($spacers, 1) + 0.05rem),
+  "select-spacer-md": 0.075rem,
+  "select-spacer-start": 0.3rem,
   "badge-padding-x": map-get($spacers, 1),
   "badge-padding-y": map-get($spacers, 1),
   "add-margin-top": map-get($spacers, "2-5"),
@@ -55,9 +56,10 @@ select.multi-select {
     }
   }
   .ss-multi-selected {
+    border-color: $input-border-color;
     padding: map-get($multiselect-spacers, "select-spacer") 0
       map-get($multiselect-spacers, "select-spacer")
-      map-get($multiselect-spacers, "select-spacer");
+      map-get($multiselect-spacers, "select-spacer-start");
     &.ss-disabled {
       .ss-values {
         .ss-value {
@@ -66,7 +68,8 @@ select.multi-select {
       }
     }
     .ss-add {
-      margin-top: map-get($multiselect-spacers, "add-margin-top");
+      margin-top: 0;
+      align-self: center;
     }
   }
 }
@@ -112,10 +115,7 @@ select.multi-select {
     .ss-multi-selected {
       padding: map-get($multiselect-spacers, "select-spacer-md") 0
         map-get($multiselect-spacers, "select-spacer-md")
-        map-get($multiselect-spacers, "select-spacer-md");
-      .ss-add {
-        margin-top: map-get($multiselect-spacers, "add-margin-top-md");
-      }
+        map-get($multiselect-spacers, "select-spacer-start");
     }
     .ss-values {
       @include font-size(1rem);

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

@@ -10,6 +10,8 @@ $yellow-50: tint-color($yellow, 90%);
 $green-50: tint-color($green, 90%);
 $cyan-50: tint-color($cyan, 90%);
 
+$zindex-dropdown: 1055;
+
 // Override theme-color "light"
 $theme-colors: map-merge(
   $theme-colors,
@@ -75,6 +77,8 @@ $accordion-border-color: $gray-300;
 $badge-font-weight: $font-weight-normal; // 400
 $badge-font-size: 1.125rem; // 18px
 $badge-font-size-desktop: 1rem; // 16px
+$badge-active-box-shadow: $btn-active-box-shadow;
+$badge-focus-width: $btn-focus-width;
 
 // banners
 $banner-content-border-color: $primary;

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

@@ -52,6 +52,7 @@
 @import "@openeuropa/bcl-bootstrap/scss/utilities/api";
 
 // Custom styles
+@import "@openeuropa/bcl-theme-default/src/scss/alert";
 @import "@openeuropa/bcl-theme-default/src/scss/button";
 @import "@openeuropa/bcl-theme-default/src/scss/collapse";
 @import "@openeuropa/bcl-theme-default/src/scss/circular-progress-bar";

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

@@ -33,22 +33,25 @@
   {% set _classes = _classes|merge([ 'bg-' ~ _background]) %}
 {% endif %}
 
-{% if _background in ['light', 'warning'] %}
-  {% set _classes = _classes|merge(['text-dark']) %}
-{% endif %}
-
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{%- if _url is not empty -%}
+  {% set attributes = attributes.setAttribute('title', _title).setAttribute('href', _url) %}
+{%- endif -%}
+
 {% set attributes = attributes.addClass(_classes) %}
 
 {%- if _url is not empty -%}
-<a href="{{ _url }}" title="{{ _title }}">
+<a
+  {{ attributes }}
+>
+{%- else -%}
+<span
+  {{ attributes }}
+>
 {%- endif -%}
-  <span
-    {{ attributes }}
-  >
   {%- if _assistive_text is not empty -%}
     <span class="visually-hidden">
       {{- _assistive_text -}}
@@ -63,9 +66,10 @@
       } only %}
     </span>
   {%- endif -%}
-  </span>
 {%- if _url is not empty -%}
 </a>
+{%- else -%}
+</span>
 {%- endif -%}
 
 {% endspaceless %}

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

@@ -3,6 +3,8 @@
 {# Parameters:
   - title: (string) (default: "")
   - title_tag: (string) (default: "div")
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
   - description: (string) (default: "")
   - link: (link object) (default: {}): predefined structure for Link component
   - image: (string) <img> tag
@@ -14,6 +16,8 @@
 
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('div') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _description = description|default('') %}
 {% set _link = link|default({}) %}
 {% set _image = image|default('') %}
@@ -28,11 +32,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 +59,19 @@
   {% 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,
+          title_link: _title_link,
+          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-base-templates/content-type.html.twig

@@ -116,6 +116,9 @@
       {% block related %}
         {{ related }}
       {% endblock %}
+      {% block share %}
+        {{ share }}
+      {% endblock %}
     </div>
   </div>
 </main>
@@ -123,9 +126,6 @@
 {% block feedback %}
   {{ feedback }}
 {% endblock %}
-{% block share %}
-  {{ share }}
-{% endblock %}
 
 {% if _with_footer %}
   {% include '@oe-bcl/bcl-footer/footer.html.twig' with footer only %}

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

@@ -1,29 +1,39 @@
 {#
   Parameters:
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
   - listing (object) (default: {})
   - pagination (object) (default: {})
   - sidebar (object) (default: '')
-  - page_title (string) (default: '')
 #}
 
 {% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
 
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _listing = listing|default({}) %}
 {% set _pagination = pagination|default({}) %}
 {% set _search = search|default({}) %}
 {% set _sidebar = sidebar|default({}) %}
-{% set _page_title = page_title|default({}) %}
+
+{% set _title_attributes = _title_attributes ?: create_attribute() %}
 
 {% block content_top %}
   {% include '@oe-bcl/bcl-button/button.html.twig' with filter_button only %}
   <div class="row">
     <div class="col-md-6 col-lg-8 align-self-center">
-      <h4 class="mb-0">
-        <span class="text-capitalize">
-          {{- _page_title -}}
-        </span>
-        ({{ listing.items.length }})
-      </h4>
+      {% if _title is not empty %}
+        {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+          title: _title ~ ' (' ~ listing.items.length ~ ')',
+          title_tag: _title_tag,
+          title_link: _title_link,
+          attributes: _title_attributes.addClass(['mb-0', 'text-capitalize']),
+        } only %}
+      {% endif %}
     </div>
     {% if badges is not empty and badges is iterable %}
       <div class="col-md-12 order-md-2 mt-3">
@@ -47,7 +57,7 @@
 
 {% block content %}
   {% if _listing is not empty %}
-    {% include '@oe-bcl/bcl-listing/listing.html.twig' with  _listing %}
+    {% include '@oe-bcl/bcl-listing/listing.html.twig' with  _listing only %}
   {% endif %}
 {% endblock %}
 

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

@@ -1,12 +1,10 @@
 {% spaceless %}
 
 {# Parameters:
-  - title (object) (default: {})
-    format: {
-      content: '',
-      tag: '',
-      classes: ''
-    }
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h5')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
   - subtitle (object) (default: {})
     format: {
       content: '',
@@ -51,7 +49,10 @@
     - card_links
 #}
 
-{% set _title = title|default({}) %}
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h1') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _subtitle = subtitle|default({}) %}
 {% set _text = text|default({}) %}
 {% set _content = content|default('') %}
@@ -116,7 +117,7 @@
 
 {% set attributes = attributes.addClass(_classes) %}
 
-<div
+<article
   {{ attributes }}
 >
 {% if _card_header is not empty %}
@@ -171,16 +172,18 @@
 <div class='{{ _horizontal_grid.right_col_classes }}'>
 {% endif %}
   <div class='{{ _body_classes }}'>
-  {%- if _title is not empty -%}
-    {% set _title_tag = _title.tag ?? 'h5' %}
-    <{{ _title_tag }}
-      {% set _title_attributes = title.attributes ?: create_attribute() %}
-      {% set _title_attributes = _title_attributes.addClass("card-title") %}
-      {{ _title_attributes }}
-    >
-      {{- title.content -}}
-    </{{ _title_tag }}>
-  {%- endif -%}
+  {% if _title is not empty %}
+    {% if _title_attributes.class is empty %}
+      {% set _title_attributes = _title_attributes.addClass('fs-5') %}
+    {% endif %}
+    {% set _title_attributes = _title_attributes.addClass('card-title') %}
+    {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+      title: _title,
+      title_tag: _title_tag,
+      title_link: _title_link,
+      attributes: _title_attributes,
+    } only %}
+  {% endif %}
   {%- if _subtitle is not empty -%}
     {% set _subtitle_tag = _subtitle.tag ?? 'h6' %}
     <{{ _subtitle_tag }}
@@ -270,6 +273,6 @@
     {{- _card_footer -}}
   </div>
 {% endif %}
-</div>
+</article>
 
 {% endspaceless %}