@openeuropa/bcl-theme-default 0.18.0 → 0.21.0

package/src/scss/{_utilities.scss → base/_utilities.scss}

@@ -24,6 +24,7 @@ $utilities: map-merge(
               map-get(map-get($utilities, "max-width"), "values"),
               (
                 date: 7.5rem,
+                col-date: calc(7.5rem + var(--#{$variable-prefix}gutter-x)),
                 "listing-img": 10rem,
               )
             ),
@@ -45,14 +46,45 @@ $utilities: map-merge(
           responsive: true,
         )
       ),
+    // Create medium font weight class
+    "font-weight":
+      map-merge(
+        map-get($utilities, "font-weight"),
+        (
+          values:
+            map-merge(
+              map-get(map-get($utilities, "font-weight"), "values"),
+              (
+                medium: 500,
+              )
+            ),
+        )
+      ),
   )
 );
 
-.text-underline-hover {
-  text-decoration: none;
+a {
+  text-underline-offset: 2px;
+
+  &:not(.text-underline-hover),
+  &:not(.standalone) {
+    text-decoration-color: rgba($primary, 0.3);
+    &:hover {
+      text-decoration-color: currentColor;
+    }
+  }
+
+  &.standalone,
+  &.text-underline-hover {
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
-.text-underline-hover:hover {
-  text-decoration: underline;
+
+svg {
+  fill: currentColor;
 }
 
 @include media-breakpoint-down(md) {
@@ -72,6 +104,10 @@ $utilities: map-merge(
   background-color: $gray-200;
 }
 
+.bg-gray-400 {
+  background-color: $gray-400;
+}
+
 .grid-3-9 {
   grid-template-columns: 25% 75%;
   grid-gap: map-get($gutters, "2-5");

package/src/scss/{_variables.scss → base/_variables.scss}

@@ -2,7 +2,6 @@ $enable-negative-margins: true;
 $negative-spacers: negativify-map($spacers);
 
 // Colors variables
-$light: #f0f0f0;
 $lighter: $gray-100;
 $date: #1698af;
 $blue-50: tint-color($blue, 90%);
@@ -45,9 +44,14 @@ $cyans: map-merge($cyans, $custom-cyans);
 // Custom color variables
 $ec-blue: #17458f;
 
+$eu-background-color: #034da1;
+$eu-cta-color: #0e47cb;
 $eu-blue: #1b4ac3;
 $eu-light-blue: #f3f6fc;
-$eu-footer-link: #0e47cb;
+$eu-footer-link: $eu-cta-color;
+$eu-selected-background: #ffcc00;
+$btn-close-eu-filter: invert(20%) sepia(70%) saturate(2876%) hue-rotate(216deg)
+  brightness(94%) contrast(105%);
 
 // Spacers
 $spacers-extended: (
@@ -84,3 +88,7 @@ $form-select-height-md: 2.375rem !default;
 
 // Navbar
 $navbar-nav-link-padding-x: 0.75rem;
+
+// Circular progress bar
+$circular-progress-border-color: $gray-400;
+$circular-progress-border-color-fill: $primary;

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

@@ -1,10 +1,13 @@
+// Base theme colors
+@import "@openeuropa/bcl-theme-default/src/scss/base/colors";
+
 // Configuration
 @import "@openeuropa/bcl-bootstrap/scss/functions";
 @import "@openeuropa/bcl-bootstrap/scss/variables";
 @import "@openeuropa/bcl-bootstrap/scss/mixins";
 
 // Custom variables
-@import "@openeuropa/bcl-theme-default/src/scss/variables";
+@import "@openeuropa/bcl-theme-default/src/scss/base/variables";
 
 @import "@openeuropa/bcl-bootstrap/scss/utilities";
 
@@ -43,13 +46,15 @@
 
 // Helpers
 @import "@openeuropa/bcl-bootstrap/scss/helpers";
-@import "@openeuropa/bcl-theme-default/src/scss/utilities";
+@import "@openeuropa/bcl-theme-default/src/scss/base/utilities";
 
 // Utilities
 @import "@openeuropa/bcl-bootstrap/scss/utilities/api";
 
 // Custom styles
+@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";
 @import "@openeuropa/bcl-theme-default/src/scss/reset";
 @import "@openeuropa/bcl-theme-default/src/scss/header";
 @import "@openeuropa/bcl-theme-default/src/scss/footer";
@@ -65,3 +70,7 @@
 @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";

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

@@ -7,6 +7,7 @@
   - items (array) (default: []): format: [
       {
         title: (string),
+        title_tag: (string),
         content: (block),
         stay_open (boolean) (default: false) stay open after another selected
       },
@@ -42,7 +43,11 @@
     {% set _button_classes = _button_classes|merge(['collapsed']) %}
   {% endif %}
   <div class="accordion-item">
-    <h2 class="accordion-header" id="heading-{{ _id }}-{{ loop.index }}">
+    {%- set _item_title_tag = _item.title_tag|default('h2') %}
+    <{{ _item_title_tag }} 
+      class="accordion-header" 
+      id="heading-{{ _id }}-{{ loop.index }}"
+    >
       {% set button_attributes = create_attribute()
                                 .addClass(_button_classes)
                                 .setAttribute('data-bs-toggle', 'collapse')
@@ -56,7 +61,7 @@
         clean_class: true,
         attributes: button_attributes
       } only %}
-    </h2>
+    </{{ _item_title_tag }}>
     <div
       id="collapse-{{ _id }}-{{ loop.index }}"
       class="accordion-collapse collapse{{ _open_item ? ' show' }}"

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

@@ -6,14 +6,14 @@
   - variant (string) (default: 'primary')
   - dismissible (boolean) (default: true)
   - animated_dismiss (boolean) (default: true)
-  - icons_path (string) (default: '')
+  - icon_path (string) (default: '')
   - icon_name (string) (default: '')
 #}
 
 {% set _message = message|default('') %}
 {% set _variant = variant|default('primary') %}
 {% set _heading = heading|default('') %}
-{% set _icons_path = icons_path|default('') %}
+{% set _icon_path = icon_path|default('') %}
 {% set _dismissible = dismissible ?? true %}
 {% set _animated_dismiss = animated_dismiss ?? true %}
 {% set _icon_name = icon_name|default('') %}
@@ -44,15 +44,15 @@
 {% set attributes = attributes.addClass(_classes).setAttribute('role', 'alert') %}
 
 <div {{ attributes }}>
-{% if _icons_path is not empty %}
+{% if _icon_path is not empty %}
   {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
     name: _icon_name ?: _icon_names[_variant],
     size: 's',
-    path: _icons_path,
+    path: _icon_path,
     attributes: create_attribute().addClass(['flex-shrink-0 me-3 mt-1 align-self-start']),
   } only %}
 {% endif %}
-  <div class="alert-content">
+  <div class="alert-content flex-grow-1">
   {%- if _heading is not empty -%}
     <h4 class="alert-heading">{{ _heading }}</h4>
   {%- endif -%}

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

@@ -9,7 +9,7 @@
   - assistive_text (string) (default: '')
   - rounded_pill (boolean) (default: false)
   - outline (boolean) (default: false)
-  - icons_path (string) (default: '')
+  - icon_path (string) (default: '')
 #}
 
 {% set _rounded_pill = rounded_pill|default(false) %}
@@ -18,7 +18,7 @@
 {% set _label = label|default('') %}
 {% set _classes = ['badge'] %}
 {% set _url = url|default('') %}
-{% set _icons_path = icons_path|default('') %}
+{% set _icon_path = icon_path|default('') %}
 {% set _title = title|default(_label) %}
 {% set _dismissible = dismissible|default(false) %}
 {% set _assistive_text = assistive_text|default('') %}
@@ -33,7 +33,7 @@
   {% set _classes = _classes|merge([ 'bg-' ~ _background]) %}
 {% endif %}
 
-{% if _background in ['light', 'warning', 'info'] %}
+{% if _background in ['light', 'warning'] %}
   {% set _classes = _classes|merge(['text-dark']) %}
 {% endif %}
 
@@ -58,8 +58,8 @@
   {%- if _dismissible -%}
     <span class="icon--close" aria-hidden="true">
       {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
-        name: "x",
-        path: _icons_path,
+        name: "x-lg",
+        path: _icon_path,
       } only %}
     </span>
   {%- endif -%}

package/templates/bcl-base-templates/content-type.html.twig

@@ -21,6 +21,7 @@
   - feedback
   - share
   - related
+  - messages_area
 #}
 
 {% set _with_header = header|default(false) %}
@@ -70,6 +71,19 @@
 {% endif %}
 
 <main {{ attributes }}>
+{% if messages is defined and messages is not empty %}
+  {% block messages_area %}
+  <div class="container">
+    {% for message in messages %}
+    {% set message_attributes = create_attribute().addClass(['mt-lg-5', 'mt-2']) %}
+      {% include '@oe-bcl/bcl-alert/alert.html.twig' with message|merge({
+        attributes: message_attributes,
+      }) only %}
+    {% endfor %}
+  </div>
+  {% endblock %}
+{% endif %}
+
 {% if _with_banner %}
   {% block banner %}
     {% include '@oe-bcl/bcl-content-banner/content-banner.html.twig' with banner only %}

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

@@ -17,32 +17,32 @@
 {% 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">
-      <h4>
+    <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>
     </div>
-    <div class="col-md-12 order-md-2 mt-3 mt-md-1">
-      {% if badges is not empty and badges is iterable %}
-        {% for badge in badges %}
-          {% include '@oe-bcl/bcl-badge/badge.html.twig' with badge|merge({
-            attributes: create_attribute().addClass(["mb-2", "me-2"])
-          }) only %}
-        {% endfor %}
-      {% endif %}
-    </div>
+    {% if badges is not empty and badges is iterable %}
+      <div class="col-md-12 order-md-2 mt-3">
+      {% for badge in badges %}
+        {% include '@oe-bcl/bcl-badge/badge.html.twig' with badge|merge({
+          attributes: create_attribute().addClass(["mb-2", "me-2"])
+        }) only %}
+      {% endfor %}
+      </div>
+    {% endif %}
     <div class="col-md-6 col-lg-4 mt-3 mt-md-0">
       <div class="float-md-end d-md-flex align-items-center mb-4 mb-md-0">
         {% include '@oe-bcl/bcl-select/select.html.twig' with sort_select|merge({
-          attributes: create_attribute().addClass(['ms-md-2 mb-2']),
+          attributes: create_attribute().addClass(['ms-md-2']),
         }) only %}
       </div>
     </div>
   </div>
-  <hr class="d-none d-md-block mb-4"/>
+  <hr class="d-none d-md-block mb-4-75"/>
 {% endblock %}
 
 {% block content %}

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

@@ -12,7 +12,22 @@
 {% set _attribution = attribution|default('') %}
 {% set _cite = cite|default('') %}
 {% set _alignment = alignment|default('left') %}
-{% set _classes = ['text-' ~ _alignment] %}
+{% set _classes = [
+  'text-' ~ _alignment,
+  "bg-lighter",
+  "p-2",
+  "px-2-5",
+  "border-4",
+  "border-secondary"
+] %}
+
+{% if _alignment == "center" %}
+  {% set _classes = _classes|merge(["border-top"]) %}
+{% elseif _alignment == "end" %}
+  {% set _classes = _classes|merge(["border-end"]) %}
+{% else %}
+  {% set _classes = _classes|merge(["border-start"]) %}
+{% endif %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
@@ -23,11 +38,11 @@
 <figure
   {{ attributes }}
 >
-  <blockquote class="blockquote">
+  <blockquote class="blockquote mb-2">
     <p>{{- _quote -}}</p>
   </blockquote>
 {% if _attribution is not empty %}
-  <figcaption class="blockquote-footer">
+  <figcaption class="blockquote-footer m-0">
     {{- _attribution -}}
   {% if _cite is not empty %}
     <cite title="{{ _cite }}">{{- _cite -}}</cite>

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

@@ -6,7 +6,7 @@
 
 {% set _classes = 'breadcrumb' %}
 {% set _links = links|default([]) %}
-{% set _icons_path = icons_path|default('') %}
+{% set _icon_path = icon_path|default('') %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
@@ -41,7 +41,7 @@
               icon_position: 'before',
                 icon: {
                   name: "arrow-left",
-                  path: _icons_path,
+                  path: _icon_path,
                   attributes: create_attribute().addClass(['d-md-none ms-0 me-2']),
                 },
              }) %}

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

@@ -44,6 +44,11 @@
   - extra_classes_header (string) (default: '')
   - extra_classes_footer (string) (default: '')
   - badges (array of badge object) (default: [])
+
+  Blocks
+    - card_date
+    - card_badges
+    - card_links
 #}
 
 {% set _title = title|default({}) %}
@@ -66,6 +71,7 @@
 {% set _extra_classes_header = extra_classes_header|default('') %}
 {% set _extra_classes_footer = extra_classes_footer|default('') %}
 {% set _badges = badges|default([]) %}
+{% set _links = links|default([]) %}
 {% set _classes = ['card'] %}
 {% if _text_color is not empty %}
   {% set _classes = _classes|merge(['text-' ~ _text_color]) %}
@@ -128,6 +134,14 @@
   {% endif %}
   {% if _image.rounded is not empty %}
     {% set _img_class = _img_class ~ ' rounded-' ~ _image.rounded %}
+  {% elseif _horizontal %}
+    {% if attributes.hasClass('border-0') %}
+      {% set _img_class = _img_class ~ ' rounded-1' %}
+    {% else %}
+      {% set _img_class = _img_class ~ ' rounded-0 rounded-start' %}
+    {% endif %}
+  {% elseif _card_header is not empty %}
+    {% set _img_class = _img_class ~ ' rounded-0' %}
   {% endif %}
   {% if _image.classes is not empty %}
     {% set _img_class = _img_class ~ " " ~ _image.classes %}
@@ -137,7 +151,9 @@
   <div class='{{ _horizontal_grid.left_col_classes  }}'>
 {% endif %}
   {% if _date is not empty %}
-    {% include '@oe-bcl/bcl-date-block/date-block.html.twig' with _date only %}
+    {% block card_date %}
+      {% 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 }}"
@@ -184,28 +200,42 @@
   {%- if _content is not empty -%}
     {{- _content -}}
   {%- endif -%}
-  {%- if _badges is not empty and _badges is iterable -%}
-    <div class="mt-2-5">
-    {% for _badge in _badges %}
-      {% if _badge.attributes is empty %}
+  {% block card_badges %}
+    {%- if _badges is not empty and _badges is iterable -%}
+      <div class="mt-2-5">
+      {% for _badge in _badges %}
+        {% if _badge.attributes is empty %}
+          {% set _badge = _badge|merge({
+            attributes: create_attribute()
+          }) %}
+        {% endif %}
         {% set _badge = _badge|merge({
-          attributes: create_attribute()
-        }) %}
-      {% endif %}
-      {% set _badge = _badge|merge({
-          attributes: _badge.attributes.addClass('mb-2')
-        })
-      %}
-      {% if not loop.last %}
-        {% set _badge = _badge|merge({
-            attributes: _badge.attributes.addClass('me-2')
+            attributes: _badge.attributes.addClass('mb-2')
           })
         %}
-      {% endif %}
-      {% include '@oe-bcl/bcl-badge/badge.html.twig' with _badge only %}
-    {% endfor %}
-    </div>
-  {%- endif -%}
+        {% if not loop.last %}
+          {% set _badge = _badge|merge({
+              attributes: _badge.attributes.addClass('me-2')
+            })
+          %}
+        {% endif %}
+        {% include '@oe-bcl/bcl-badge/badge.html.twig' with _badge only %}
+        
+      {% endfor %}
+      </div>
+    {%- endif -%}
+  {% endblock %}
+  {% block card_links %}
+    {%- if _links is not empty and _links is iterable -%}
+      <div class="mt-2-5 mb-2">
+      {% for _link in _links %}
+        <div class="mb-3 mb-md-0 d-block d-md-inline-block me-4-5">
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
+        </div>
+      {% endfor %}
+      </div>
+    {%- endif -%}
+  {% endblock %}
   </div>
 {% if _horizontal %}
 </div>

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

@@ -14,6 +14,9 @@
     options: ['0', '1', '2', '3', '4', '5']
   - equal_height (boolean) (default: false)
   - cols_extra_classes (string) (default: '')
+
+  Blocks
+    - card_layout_card
 #}
 
 {% set _type = type|default('group') %}
@@ -69,7 +72,9 @@
     {% if _type == 'grid' or _type == 'masonry' %}
       <div class="{{ _cols_classes }}">
     {% endif %}
-      {% include '@oe-bcl/bcl-card/card.html.twig' with _item only %}
+      {% block card_layout_card %}
+        {% include '@oe-bcl/bcl-card/card.html.twig' with _item only %}
+      {% endblock %}
     {% if _type == 'grid' or _type == 'masonry' %}
       </div>
     {% endif %}

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

@@ -11,6 +11,7 @@
       image: (string) <img> tag
       caption (string)
       caption_classes (string)
+      caption_title (string) 
       interval (integer) (default: 0)
      }
      ...
@@ -20,6 +21,7 @@
   - previous_label (string) (default: '')
   - next_label (string) (default: '')
   - with_indicators (boolean) (default: false)
+  - rounded_indicators (boolean) (default: false)
 #}
 
 {% set _id = id|default('') %}
@@ -29,6 +31,7 @@
 {% set _prev_label = prev_label|default('') %}
 {% set _next_label = next_label|default('') %}
 {% set _with_indicators = with_indicators|default(false) %}
+{% set _rounded_indicators = rounded_indicators|default(false) %}
 {% set _classes = ['carousel slide'] %}
 {% set _autoinit = autoinit ?? true %}
 {% set _autoplay = autoplay ?? true %}
@@ -59,6 +62,10 @@
   {% set attributes = attributes.setAttribute('data-bs-touch', 'false') %}
 {% endif %}
 
+{% if _rounded_indicators %}
+  {% set attributes = attributes.addClass('rounded-indicators') %}
+{% endif %}
+
 {% if not _autoplay %}
   {% set attributes = attributes.setAttribute('data-bs-interval', 'false') %}
 {% endif %}
@@ -69,7 +76,7 @@
   {{ attributes }}
 >
 {% if _with_indicators %}
-  <div class="carousel-indicators">
+  <div class="carousel-indicators d-none d-md-flex">
   {% for _i in 0..(_items|length - 1) %}
     {% set button_attributes = create_attribute()
                               .setAttribute('aria-label', 'Slide ' ~ (_i + 1))
@@ -102,15 +109,29 @@
     {% 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 %}
+    {% if (_item.caption is defined and _item.caption is not empty) or (_item.link is defined and _item.link is not empty) %}
       {% set _caption_classes = 'carousel-caption' %}
-      {% if _item.caption_classes is defined and _item.caption_classes is not empty %}
-        {% set _caption_classes = _caption_classes ~ ' ' ~ _item.caption_classes %}
+      {% 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 }}"
       >
-        {{- _item.caption -}}
+        {% 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 %}
+            <h5>{{ _item.caption_title }}</h5>
+          {% 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>

package/templates/bcl-contact-form/contact-form.html.twig

@@ -0,0 +1,5 @@
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+
+{% block content %}
+  {% include '@oe-bcl/bcl-form/form.html.twig' with form only %}
+{% endblock %}