@openeuropa/bcl-theme-default 0.21.0 → 0.24.0

package/src/scss/_tabs.scss

@@ -1,4 +1,3 @@
-/* stylelint-disable declaration-no-important */
 .nav {
   &.bcl__nav {
     border: none;
@@ -30,18 +29,9 @@
 
 @include media-breakpoint-down(md) {
   .nav-tabs {
-    position: relative;
-    flex-wrap: nowrap;
-    overflow-x: scroll;
-    overflow-y: hidden;
-    white-space: nowrap;
+    @include horizontal-slider;
     border: none;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    &::-webkit-scrollbar {
-      width: 0;
-      height: 0;
-    }
+
     .nav-item {
       z-index: 1;
     }
@@ -53,6 +43,7 @@
       }
     }
     .dropdown-menu {
+      /* stylelint-disable-next-line declaration-no-important */
       position: fixed !important;
     }
   }

package/src/scss/base/_colors.scss

@@ -1,12 +1,21 @@
 // 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;
+
+// Color variants scales
+
+// Tables
+$table-hover-bg-factor: 0.1;
+
+// Alerts
+$alert-bg-scale: -90%;
+$alert-border-scale: -80%;

package/src/scss/base/_layout.scss

@@ -0,0 +1,5 @@
+@include media-breakpoint-up(lg) {
+  .bcl-sidebar h2 {
+    font-size: $h4-font-size;
+  }
+}

package/src/scss/base/_mixins.scss

@@ -0,0 +1,13 @@
+@mixin horizontal-slider {
+  position: relative;
+  flex-wrap: nowrap;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}

package/src/scss/base/_utilities.scss

@@ -23,8 +23,8 @@ $utilities: map-merge(
             map-merge(
               map-get(map-get($utilities, "max-width"), "values"),
               (
-                date: 7.5rem,
-                col-date: calc(7.5rem + var(--#{$variable-prefix}gutter-x)),
+                date: 10rem,
+                col-date: calc(10rem + var(--#{$variable-prefix}gutter-x)),
                 "listing-img": 10rem,
               )
             ),
@@ -46,6 +46,20 @@ $utilities: map-merge(
           responsive: true,
         )
       ),
+    "border-top":
+      map-merge(
+        map-get($utilities, "border-top"),
+        (
+          responsive: true,
+        )
+      ),
+    "border-bottom":
+      map-merge(
+        map-get($utilities, "border-bottom"),
+        (
+          responsive: true,
+        )
+      ),
     // Create medium font weight class
     "font-weight":
       map-merge(
@@ -63,25 +77,40 @@ $utilities: map-merge(
   )
 );
 
+/* stylelint-disable no-descending-specificity */
 a {
   text-underline-offset: 2px;
 
-  &:not(.text-underline-hover),
-  &:not(.standalone) {
+  &:not(.text-underline-hover):not(.standalone) {
     text-decoration-color: rgba($primary, 0.3);
+
+    &:visited {
+      text-decoration-color: rgba($purple, 0.3);
+    }
+
     &:hover {
       text-decoration-color: currentColor;
+
+      &:visited {
+        text-decoration-color: $purple;
+      }
     }
   }
 
   &.standalone,
   &.text-underline-hover {
-    text-decoration: none;
+    text-decoration-color: transparent;
+
     &:hover {
-      text-decoration: underline;
+      text-decoration-color: currentColor;
+
+      &:visited {
+        text-decoration-color: $purple;
+      }
     }
   }
 }
+/* stylelint-enable no-descending-specificity */
 
 svg {
   fill: currentColor;
@@ -108,6 +137,10 @@ svg {
   background-color: $gray-400;
 }
 
+.border-gray-300 {
+  border-color: $gray-300;
+}
+
 .grid-3-9 {
   grid-template-columns: 25% 75%;
   grid-gap: map-get($gutters, "2-5");

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

@@ -46,15 +46,22 @@
 
 // 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";
 
 // Utilities
 @import "@openeuropa/bcl-bootstrap/scss/utilities/api";
 
+// BCL mixins
+@import "@openeuropa/bcl-theme-default/src/scss/base/mixins";
+
 // 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/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";

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

@@ -3,18 +3,17 @@
 {#
   Parameters:
   - id (int) (default: random(1000))
-  - flush (boolean) (default: false) flush variant of the accordion
+  - flush (boolean) (default: false)
   - items (array) (default: []): format: [
       {
         title: (string),
         title_tag: (string),
         content: (block),
-        stay_open (boolean) (default: false) stay open after another selected
+        stay_open (boolean) (default: false)
       },
-      ...
     ]
-  - open_item_id (int) (default: 0) index value of the item to open (starting from 1),
-    all closed by default (0)
+  - open_item_id (int) (default: 0)
+  - attributes (drupal attrs)
 #}
 
 {% set _id = id|default(random(1000)) %}

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

@@ -8,15 +8,17 @@
   - animated_dismiss (boolean) (default: true)
   - icon_path (string) (default: '')
   - icon_name (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
 {% set _message = message|default('') %}
-{% set _variant = variant|default('primary') %}
 {% set _heading = heading|default('') %}
-{% set _icon_path = icon_path|default('') %}
+{% set _variant = variant|default('primary') %}
 {% set _dismissible = dismissible ?? true %}
 {% set _animated_dismiss = animated_dismiss ?? true %}
+{% set _icon_path = icon_path|default('') %}
 {% set _icon_name = icon_name|default('') %}
+
 {% set _classes = ['alert', 'alert-' ~ _variant|e('html_attr'), 'd-flex', 'align-items-center'] %}
 {% set _icon_names = {
     primary: "info-circle-fill",
@@ -37,6 +39,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,12 +59,12 @@
     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">
   {%- if _heading is not empty -%}
-    <h4 class="alert-heading">{{ _heading }}</h4>
+    <div class="alert-heading h4">{{ _heading }}</div>
   {%- endif -%}
   {%- if _message is not empty -%}
     {{- _message -}}

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

@@ -10,18 +10,20 @@
   - rounded_pill (boolean) (default: false)
   - outline (boolean) (default: false)
   - icon_path (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
-{% set _rounded_pill = rounded_pill|default(false) %}
-{% set _outline = outline|default(false) %}
-{% set _background = background|default('primary') %}
 {% set _label = label|default('') %}
-{% set _classes = ['badge'] %}
+{% set _background = background|default('primary') %}
 {% set _url = url|default('') %}
-{% set _icon_path = icon_path|default('') %}
 {% set _title = title|default(_label) %}
 {% set _dismissible = dismissible|default(false) %}
 {% set _assistive_text = assistive_text|default('') %}
+{% set _rounded_pill = rounded_pill|default(false) %}
+{% set _outline = outline|default(false) %}
+{% set _icon_path = icon_path|default('') %}
+
+{% set _classes = ['badge'] %}
 
 {% if _rounded_pill %}
   {% set _classes = _classes|merge(['rounded-pill']) %}
@@ -33,22 +35,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 +68,10 @@
       } only %}
     </span>
   {%- endif -%}
-  </span>
 {%- if _url is not empty -%}
 </a>
+{%- else -%}
+</span>
 {%- endif -%}
 
 {% endspaceless %}

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

@@ -1,19 +1,24 @@
 {% spaceless %}
 
 {# Parameters:
-  - title: (string) (default: "")
-  - title_tag: (string) (default: "div")
-  - description: (string) (default: "")
+  - 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
   - shade: (boolean) (default: false)
   - hero: (boolean) (default: false)
   - full_width: (boolean) (default: false)
-  - content_classes: (string) (default: "")
+  - content_classes: (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
 {% 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('') %}
@@ -22,17 +27,18 @@
 {% set _full_width = full_width|default(false) %}
 {% set _content_classes = content_classes|default('') %}
 
-
 {% set _content_class = 'bcl-banner__content' %}
 {% if _content_classes is not empty %}
   {% 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

@@ -16,6 +16,7 @@
   - header
   - footer
   - content
+  - content_row
   - sidebar
   - banner
   - feedback
@@ -37,6 +38,7 @@
   {% set _col_classes = {
     left: [
       'col-12',
+      'bcl-sidebar',
     ],
     right: [
       'col-12',
@@ -92,6 +94,9 @@
 
   <div class="container mt-md-4-75 mt-4">
     <div class="row">
+      {% block content_row %}
+        {{ content_row }}
+      {% endblock %}
     {% if _with_sidebar %}
       <div class="{{ _col_classes.left|join(' ') }}">
         {% block sidebar %}{% endblock %}
@@ -116,6 +121,9 @@
       {% block related %}
         {{ related }}
       {% endblock %}
+      {% block share %}
+        {{ share }}
+      {% endblock %}
     </div>
   </div>
 </main>
@@ -123,9 +131,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,41 @@
 {#
   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 %}
+{% if filter_button %}
   {% include '@oe-bcl/bcl-button/button.html.twig' with filter_button only %}
+{% endif %}
   <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 +59,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-blockquote/blockquote.html.twig

@@ -5,13 +5,15 @@
   - attribution (string) (default: '')
   - cite (string) (default: '')
   - alignment (string) (default: 'left')
-    - options ["left", "center", "end"]
+    - options ['left', 'center', 'end']
+  - attributes (drupal attrs)
 #}
 
 {% set _quote = quote|default('') %}
 {% set _attribution = attribution|default('') %}
 {% set _cite = cite|default('') %}
 {% set _alignment = alignment|default('left') %}
+
 {% set _classes = [
   'text-' ~ _alignment,
   "bg-lighter",

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

@@ -1,7 +1,9 @@
 {% spaceless %}
 
 {# Parameters:
-  - links (array of objects of type link)
+  - links (array of objects of type link) (default: [])
+  - icon_path (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
 {% set _classes = 'breadcrumb' %}

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

@@ -5,7 +5,7 @@
   - label (string) (default: '')
   - variant (string) (default: 'primary')
   - size (string) (default: 'md')
-    - options ["sm", "md", "lg"]
+    - options ['sm', 'md', 'lg']
   - type (string) (default: 'button')
   - outline (boolean) (default: false)
   - disabled (boolean) (default: false)
@@ -14,12 +14,13 @@
   - id (string) (default: '')
   - icon (icon object) (default: {}): predefined structure for Icon component
   - icon_position (string) (default: after)
-    - options ["after", "before"]
+    - options ['after', 'before']
   - icon_spacing (string) (default: '')
-    - options ["sm", "md", "lg"]
-  - clean_class (boolean) (default: false)
+    - options ['sm', 'md', 'lg']
   - spinner (spinner object) (default: {})
   - show_spinner (boolean) (default: false)
+  - clean_class (boolean) (default: false)
+  - attributes (drupal attrs)
 #}
 
 {% set _label = label|default('') %}
@@ -37,6 +38,7 @@
 {% set _show_spinner = show_spinner|default(false) %}
 {% set _spinner = spinner|default({}) %}
 {% set _clean_class = clean_class|default(false) %}
+
 {% set _classes = [] %}
 {% if _clean_class == false %}
   {% set _classes = _classes|merge(['btn', 'btn-' ~ (_outline ? 'outline-' : '') ~ _variant|e('html_attr')]) %}

package/templates/bcl-button-group/button-group.html.twig

@@ -3,11 +3,12 @@
 {# Parameters:
   - vertical (boolean) (default: false)
   - size (string) (default: 'md')
-    - options ["sm", "md", "lg"]
-  - toolbar (boolean) (default: 'false')
+    - options ['sm', 'md', 'lg']
   - aria_label (string) (default: '')
+  - toolbar (boolean) (default: 'false')
   - toolbar_aria_label (string) (default: '')
-  - items (array of arrays with objects of type button or form-input (input key mandatory when the object is a form-input))
+  - items (array of arrays with objects of type button or form-input (input key mandatory when the object is a form-input)) (default: [])
+  - attributes (drupal attrs)
 #}
 
 {% set _vertical = vertical|default(false) %}