@openeuropa/bcl-theme-default 0.17.0 → 0.20.0

package/src/scss/_header.scss

@@ -24,7 +24,7 @@ $header-link-active-background: #003776 !default;
 .bcl-header--neutral {
   .bcl-header__project,
   .bcl-header__navbar {
-    background: $gray-600;
+    background: $gray-700;
   }
 }
 
@@ -53,7 +53,10 @@ $header-link-active-background: #003776 !default;
 }
 
 .bcl-header__navbar .navbar-nav .nav-link {
-  color: $gray-400;
+  color: $gray-100;
+  &:first-child {
+    padding-left: 0;
+  }
 }
 
 .bcl-header__navbar .navbar-nav .nav-link:focus,
@@ -217,50 +220,51 @@ $header-link-active-background: #003776 !default;
   }
 }
 
-// language list
-$language-background: $header-background !default;
-$language-color: #fff !default;
-$language-list-gap: map-get($spacers, 2) !default;
-$language-item-background: #fff !default;
-$language-item-color: $header-background !default;
-$language-item-background-hover: #ffd617 !default;
-$language-item-color-hover: $dark !default;
-
-.bcl-language .modal-content {
-  color: $language-color;
-  background-color: $language-background;
-}
-
-.bcl-language__list {
-  display: grid;
-  gap: $language-list-gap;
-  margin-bottom: map-get($spacers, 4);
-}
-
-.bcl-language__title {
-  margin-bottom: map-get($spacers, 4);
-}
-
-.bcl-language__item {
-  padding: map-get($spacers, 2) $spacer;
-  font-weight: $font-weight-bold;
-  color: $language-item-color;
-  text-decoration: none; //should be handled at link level
-  background-color: $language-item-background;
-
-  &:hover,
-  &:focus {
-    color: $language-item-color-hover;
-    text-decoration: underline;
-    background-color: $language-item-background-hover;
+.bcl-language-list-modal {
+  .btn-close {
+    opacity: 1;
+  }
+  &.bcl-language-list-modal--ec,
+  &.bcl-language-list-modal--eu {
+    .modal-body {
+      padding-top: map-get($spacers, 2);
+      overflow: visible;
+    }
+    .modal-header {
+      border: 0;
+      padding: 0;
+    }
+  }
+  &.bcl-language-list-modal--eu {
+    .modal-body {
+      background: $white;
+    }
+    .modal-dialog {
+      background: $white;
+    }
+    h5 {
+      color: $eu-cta-color;
+    }
+    svg {
+      color: $eu-cta-color;
+    }
+    .btn-close {
+      filter: $btn-close-eu-filter;
+    }
+  }
+  &.bcl-language-list-modal--ec {
+    background: $eu-background-color;
+    .modal-content {
+      background: $eu-background-color;
+    }
+    h5 {
+      color: $white;
+    }
+    svg {
+      color: $white;
+    }
+    .btn-close {
+      filter: $btn-close-white-filter;
+    }
   }
-}
-
-.bcl-language .modal-body {
-  padding-top: map-get($spacers, 5);
-  padding-bottom: map-get($spacers, 5);
-}
-
-.bcl-language .btn-close {
-  filter: $btn-close-white-filter;
 }

package/src/scss/_icon.scss

@@ -71,9 +71,6 @@ $icon: (
   transform: scaleY(-1);
 }
 
-.btn {
-  .bi {
-    vertical-align: top;
-    margin-top: map-get($spacers, 1);
-  }
+.icon--file {
+  color: $gray-600;
 }

package/src/scss/_inpage-navigation.scss

@@ -14,6 +14,16 @@
     .nav-link {
       padding: map-get($spacers, 2);
       margin-bottom: map-get($spacers, 2);
+      &:not(.active) {
+        &:hover {
+          text-decoration-line: underline;
+          text-decoration-color: currentColor;
+        }
+      }
+    }
+
+    ul {
+      padding: 0 map-get($spacers, "2-5");
     }
   }
 }

package/src/scss/_language-list.scss

@@ -0,0 +1,51 @@
+.bcl-language-list {
+  .btn {
+    background: $white;
+    color: $primary;
+    border-color: $gray-400;
+    &:hover {
+      text-decoration: underline;
+      border-color: $eu-cta-color;
+    }
+    &.selected {
+      background: $secondary;
+      color: $white;
+      border-color: $secondary;
+      svg {
+        color: $white;
+      }
+    }
+  }
+  &.bcl-language-list--ec,
+  &.bcl-language-list--eu {
+    .btn {
+      color: $eu-cta-color;
+      font-weight: $font-weight-bold;
+      &.selected {
+        background: $eu-selected-background;
+        color: $black;
+        border-color: $eu-selected-background;
+        svg {
+          color: $black;
+        }
+      }
+    }
+  }
+  &.bcl-language-list--eu {
+    .btn {
+      border: 2px solid $eu-cta-color;
+    }
+  }
+  &.bcl-language-list--ec {
+    .main {
+      background: $eu-background-color;
+      h5 {
+        color: $white;
+      }
+    }
+    .btn {
+      border-radius: 0;
+      border-color: transparent;
+    }
+  }
+}

package/src/scss/_reset.scss

@@ -3,3 +3,12 @@ body {
   // needed for full-width banner
   overflow-x: hidden;
 }
+
+em.placeholder {
+  background-color: transparent;
+  cursor: auto;
+  min-height: 0;
+  vertical-align: baseline;
+  opacity: 1;
+  display: inline;
+}

package/src/scss/base/_colors.scss

@@ -0,0 +1,12 @@
+// Custom theme colors
+
+$primary: #0a58ca;
+$secondary: #801f4f;
+$info: #087990;
+$danger: #b02a37;
+$warning: #ffc107;
+$success: #198754;
+$light: #f8f9fa;
+$dark: #212529;
+
+$text-muted: #495057;

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

@@ -45,14 +45,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 +103,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,8 +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: #f4f6fb;
+$eu-light-blue: #f3f6fc;
+$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: (
@@ -80,3 +85,10 @@ $form-font-size: $font-size-base !default;
 $form-font-size-lg: $font-size-base + 0.25rem !default;
 $form-select-height: 3rem !default;
 $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,4 @@
 @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";

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-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,10 @@
   - extra_classes_header (string) (default: '')
   - extra_classes_footer (string) (default: '')
   - badges (array of badge object) (default: [])
+
+  Blocks
+    - card_date
+    - card_badge
 #}
 
 {% set _title = title|default({}) %}
@@ -128,6 +132,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 +149,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 }}"
@@ -202,7 +216,10 @@
           })
         %}
       {% endif %}
-      {% include '@oe-bcl/bcl-badge/badge.html.twig' with _badge only %}
+      {% block card_badge %}
+        {% include '@oe-bcl/bcl-badge/badge.html.twig' with _badge only %}
+      {% endblock %}
+      
     {% endfor %}
     </div>
   {%- endif -%}

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-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 %}