@openeuropa/bcl-theme-default 1.9.0 → 1.9.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "description": "OE - BCL theme default",
   "scripts": {
     "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
@@ -22,9 +22,9 @@
     "@ecl/resources-ec-logo": "3.7.1",
     "@ecl/resources-eu-logo": "3.7.1",
     "@ecl/resources-flag-icons": "3.7.1",
-    "@openeuropa/bcl-bootstrap": "^1.9.0",
-    "@openeuropa/bcl-builder": "^1.9.0",
-    "@openeuropa/bcl-twig-templates": "^1.9.0",
+    "@openeuropa/bcl-bootstrap": "^1.9.2",
+    "@openeuropa/bcl-builder": "^1.9.2",
+    "@openeuropa/bcl-twig-templates": "^1.9.2",
     "@rollup/plugin-replace": "6.0.2",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
@@ -50,5 +50,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "461de595e5ddda95383ceaf5d02d513aef111246"
+  "gitHead": "4ffc129d7f11f3e1b7f283c36379ea458af986b7"
 }

package/src/js/accordion-toggle/accordion-toggle.js

@@ -0,0 +1,51 @@
+import Collapse from "@openeuropa/bcl-bootstrap/js/src/collapse";
+import EventHandler from "@openeuropa/bcl-bootstrap/js/src/dom/event-handler";
+import SelectorEngine from "@openeuropa/bcl-bootstrap/js/src/dom/selector-engine";
+
+class AccordionToggle {
+  static isInitialized = false;
+
+  constructor(buttonElement) {
+    this.buttonElement = buttonElement;
+    this.targetAccordionId = buttonElement.getAttribute("data-target");
+    this.action = buttonElement.getAttribute("data-action");
+
+    this.accordionElement = SelectorEngine.findOne(`#${this.targetAccordionId}`);
+    this.accordionItems = SelectorEngine.find(".accordion-collapse", this.accordionElement);
+
+    this.addEventListeners();
+  }
+
+  addEventListeners() {
+    EventHandler.on(this.buttonElement, "click", (event) => this.handleAccordionAction(event));
+  }
+
+  handleAccordionAction(event) {
+    const item = event.target;
+    const action = item.getAttribute('data-action');
+    const accordionItems = this.accordionItems;
+
+    accordionItems.forEach((accordionItem) => {
+      const collapseInstance = Collapse.getOrCreateInstance(accordionItem, { toggle: false });
+
+      if (action === 'expand') {
+        collapseInstance.show();
+      } else if (action === 'collapse') {
+        collapseInstance.hide();
+      }
+    });
+  }
+
+  static init() {
+    if (AccordionToggle.isInitialized) {
+      return;
+    }
+
+    const toggleButtons = SelectorEngine.find('[data-action][data-target]');
+    toggleButtons.forEach(buttonElement => new AccordionToggle(buttonElement));
+
+    AccordionToggle.isInitialized = true;
+  }
+}
+
+export default AccordionToggle;

package/src/js/index.esm.js

@@ -10,9 +10,7 @@ import Button from "@openeuropa/bcl-bootstrap/js/src/button";
 import Carousel from "@openeuropa/bcl-bootstrap/js/src/carousel";
 import Collapse from "@openeuropa/bcl-bootstrap/js/src/collapse";
 import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
-import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
-import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -20,6 +18,9 @@ import ScrollSpy from "@openeuropa/bcl-bootstrap/js/src/scrollspy-legacy";
 import Tab from "@openeuropa/bcl-bootstrap/js/src/tab";
 import Toast from "@openeuropa/bcl-bootstrap/js/src/toast";
 import Tooltip from "@openeuropa/bcl-bootstrap/js/src/tooltip";
+import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
+import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
+import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
 
 export {
   Alert,
@@ -27,9 +28,7 @@ export {
   Carousel,
   Collapse,
   Dropdown,
-  Gallery,
   Modal,
-  AccessibleToggle,
   Offcanvas,
   Popover,
   ScrollSpyV2,
@@ -37,4 +36,7 @@ export {
   Tab,
   Toast,
   Tooltip,
+  Gallery,
+  AccessibleToggle,
+  AccordionToggle,
 };

package/src/js/index.umd.js

@@ -10,9 +10,7 @@ import Button from "@openeuropa/bcl-bootstrap/js/src/button";
 import Carousel from "@openeuropa/bcl-bootstrap/js/src/carousel";
 import Collapse from "@openeuropa/bcl-bootstrap/js/src/collapse";
 import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
-import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
-import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -20,6 +18,9 @@ import ScrollSpy from "@openeuropa/bcl-bootstrap/js/src/scrollspy-legacy";
 import Tab from "@openeuropa/bcl-bootstrap/js/src/tab";
 import Toast from "@openeuropa/bcl-bootstrap/js/src/toast";
 import Tooltip from "@openeuropa/bcl-bootstrap/js/src/tooltip";
+import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
+import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
+import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
 
 export default {
   Alert,
@@ -27,9 +28,7 @@ export default {
   Carousel,
   Collapse,
   Dropdown,
-  Gallery,
   Modal,
-  AccessibleToggle,
   Offcanvas,
   Popover,
   ScrollSpyV2,
@@ -37,4 +36,7 @@ export default {
   Tab,
   Toast,
   Tooltip,
+  Gallery,
+  AccessibleToggle,
+  AccordionToggle,
 };

package/src/scss/_inpage-navigation.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 .bcl-sidebar:has(> .bcl-inpage-navigation) {
   position: sticky;
   top: 0;
@@ -66,10 +67,68 @@
     padding-right: 0;
   }
 }
-
-@include media-breakpoint-down(lg) {
-  .bcl-sidebar:has(> .bcl-inpage-navigation) {
-    padding-bottom: map-get($spacers, 3);
+@include media-breakpoint-down(md) {
+  .bcl-inpage-navigation.dynamic-active {
+    display: none;
+    &:has(.active) {
+      display: block;
+    }
+  }
+  .bcl-sidebar {
+    .bcl-inpage-navigation.dynamic-active {
+      ul {
+        padding: map-get($spacers, 1);
+      }
+      .bcl-heading {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 2000;
+        height: 64px;
+        opacity: 0;
+      }
+      .dropdown-menu {
+        display: block;
+        padding: map-get($spacers, 2);
+        position: absolute;
+        &.show {
+          .nav-item {
+            display: block;
+            &:has(> .active) {
+              order: -1;
+            }
+          }
+          &:after {
+            border-top-color: transparent;
+            border-bottom: 5px solid #fff;
+            top: 25px;
+          }
+        }
+        .nav {
+          display: flex;
+        }
+        .nav-item {
+          display: none;
+          transition: none;
+          &:has(> .active) {
+            display: block;
+          }
+          .nav-link {
+            margin: 0;
+          }
+        }
+        &:after {
+          content: "";
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+          border-top: 5px solid #fff;
+          position: absolute;
+          top: 30px;
+          right: 22px;
+        }
+      }
+    }
   }
 }
 
@@ -94,3 +153,9 @@
     }
   }
 }
+
+@include media-breakpoint-down(lg) {
+  .bcl-sidebar:has(> .bcl-inpage-navigation) {
+    padding-bottom: map-get($spacers, 3);
+  }
+}

package/src/scss/base/_colors.scss

@@ -9,6 +9,11 @@ $success: #09854c;
 $light: #f8f9fa;
 $dark: #212529;
 
+$gray-200: #e9ecef;
+$gray-400: #ced4da;
+$gray-600: #6c757d;
+$gray-700: #495057;
+
 $text-muted: #495057;
 
 // Color variants scales
@@ -16,6 +21,29 @@ $text-muted: #495057;
 // Tables
 $table-hover-bg-factor: 0.1;
 
-// Alerts
-$alert-bg-scale: -90%;
-$alert-border-scale: -80%;
+// Background colors as before for Alerts and list-group
+$primary-bg-subtle: tint-color($primary, 90%);
+$secondary-bg-subtle: tint-color($secondary, 90%);
+$success-bg-subtle: tint-color($success, 90%);
+$info-bg-subtle: tint-color($info, 90%);
+$warning-bg-subtle: tint-color($warning, 90%);
+$danger-bg-subtle: tint-color($danger, 90%);
+
+$primary-border-subtle: tint-color($primary, 80%);
+$secondary-border-subtle: tint-color($secondary, 80%);
+$success-border-subtle: tint-color($success, 80%);
+$info-border-subtle: tint-color($info, 80%);
+$warning-border-subtle: tint-color($warning, 80%);
+$danger-border-subtle: tint-color($danger, 80%);
+
+// Colors as in Bootstrap 5.2.3
+
+$breadcrumb-active-color: $gray-600;
+$form-check-input-border: 1px solid #00000040;
+$input-border-color: $gray-400;
+$body-secondary-color: $gray-700;
+$input-placeholder-color: $gray-600;
+$form-file-button-bg: $gray-200;
+$nav-link-disabled-color: $gray-600;
+$table-border-factor: 0.1;
+$nav-tabs-link-active-color: $gray-700;

package/src/scss/color_scheme/_alert.scss

@@ -1,18 +1,22 @@
 // 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
+
+@use "sass:math";
+
 @mixin generate-alerts($color, $value) {
-  $alert-background: shift-color($value, $alert-bg-scale);
-  $alert-border: shift-color($value, $alert-border-scale);
-  $alert-color: shift-color($value, $alert-color-scale);
+  $bg: shift-color($value, -80%);
+  $border: shift-color($value, -70%);
+  $text: shift-color($value, 40%);
 
-  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
-    $alert-color: mix(
-      $value,
-      color-contrast($alert-background),
-      abs($alert-color-scale)
-    );
+  @if (contrast-ratio($bg, $text) < $min-contrast-ratio) {
+    $text: mix($value, color-contrast($bg), math.abs(40%));
   }
+
   .alert-#{$color} {
-    @include alert-variant($alert-background, $alert-border, $alert-color);
+    --#{$prefix}alert-bg: #{$bg};
+    --#{$prefix}alert-border-color: #{$border};
+    --#{$prefix}alert-color: #{$text};
+    --#{$prefix}alert-link-color: #{$text}; // or some other logic
   }
 }

package/src/scss/color_scheme/_background.scss

@@ -6,6 +6,7 @@
     $accordion-button-active-bg: tint-color($value, 90%);
     --#{$prefix}accordion-bg: #{$value};
     --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
+    --#{$prefix}table-bg: #{$value};
 
     // Card
     .card {

package/src/scss/color_scheme/_list_group.scss

@@ -1,15 +1,20 @@
 // Color scheme - List Group
 
+@use "sass:math";
+
 @mixin generate-list-group($color, $value) {
-  // List group
-  $lg-v-bg: shift-color($value, $list-group-item-bg-scale);
-  $lg-v-color: shift-color($value, $list-group-item-color-scale);
-  @if (contrast-ratio($lg-v-bg, $lg-v-color) < $min-contrast-ratio) {
-    $lg-v-color: mix(
-      $value,
-      color-contrast($lg-v-bg),
-      abs($list-group-item-color-scale)
-    );
+  $bg: shift-color($value, -80%);
+  $text: $value;
+  $border: shift-color($value, 40%);
+
+  @if (contrast-ratio($bg, $text) < $min-contrast-ratio) {
+    $text: mix($value, color-contrast($bg), math.abs(40%));
+  }
+
+  .list-group-item-#{$color} {
+    // Required base CSS variables
+    --#{$prefix}list-group-color: #{$text};
+    --#{$prefix}list-group-bg: #{$bg};
+    --#{$prefix}list-group-border-color: #{$border};
   }
-  @include list-group-item-variant($color, $lg-v-bg, $lg-v-color);
 }

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

@@ -1,8 +1,10 @@
+// Configuration Variables
+@import "@openeuropa/bcl-bootstrap/scss/functions";
+
 // Base theme colors
 @import "@openeuropa/bcl-theme-default/src/scss/base/colors";
 
-// Configuration
-@import "@openeuropa/bcl-bootstrap/scss/functions";
+// Configuration Methods Maps and Mixins
 @import "@openeuropa/bcl-bootstrap/scss/variables";
 @import "@openeuropa/bcl-bootstrap/scss/maps";
 @import "@openeuropa/bcl-bootstrap/scss/mixins";

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

@@ -16,6 +16,8 @@
         stay_open (boolean) (default: false)
       },
     ]
+  - expand_button: (button object) (default: {})
+  - collapse_button: (button object) (default: {})
   - open_item_id (int) (default: 0)
   - attributes (drupal attrs)
 #}
@@ -27,6 +29,8 @@
 {% set _id = id|default(random(1000)) %}
 {% set _flush = flush ?? false %}
 {% set _items = items|default([]) %}
+{% set _expand_button = expand_button|default({}) %}
+{% set _collapse_button = collapse_button|default({}) %}
 {% set _open_item_id = open_item_id|default(0) %}
 {% set _classes = ['accordion'] %}
 {% if _flush %}
@@ -43,57 +47,92 @@
 <div
   {{ attributes }}
 >
-{%- 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 _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 -%}
 
-{% for _item in _items %}
-  {% set _open_item = _open_item_id == loop.index %}
-  {% set _button_classes = ['accordion-button'] %}
-  {% if not _open_item %}
-    {% set _button_classes = _button_classes|merge(['collapsed']) %}
-  {% endif %}
-  <div class="accordion-item">
-    {%- set _item_title_tag = _item.title_tag|default('h2') %}
-    <{{ _item_title_tag }} 
-      class="accordion-header" 
-      id="heading-{{ _id }}-{{ loop.index }}"
+  {% if _items|length > 1 and (_expand_button is not empty or _collapse_button is not empty) %}
+  {% set wrapper_attributes = create_attribute().addClass(['d-flex', 'justify-content-end', 'gap-3', 'mb-3']) %}
+  <div
+    {{ wrapper_attributes }}
     >
-      {% set button_attributes = create_attribute()
-                                .addClass(_button_classes)
-                                .setAttribute('data-bs-toggle', 'collapse')
-                                .setAttribute('autocomplete', 'off')
-                                .setAttribute('data-bs-target', '#collapse-' ~ _id ~ '-' ~ loop.index)
-                                .setAttribute('aria-controls', 'collapse-' ~ _id ~ '-' ~ loop.index)
-                                .setAttribute('aria-expanded', open_item ? 'true' : 'false')
-      %}
-      {% include '@oe-bcl/bcl-button/button.html.twig' with {
-        label: _item.title,
-        clean_class: true,
-        attributes: button_attributes
-      } only %}
-    </{{ _item_title_tag }}>
-    <div
-      id="collapse-{{ _id }}-{{ loop.index }}"
-      class="accordion-collapse collapse{{ _open_item ? ' show' }}"
-      aria-labelledby="heading-{{ _id }}-{{ loop.index }}"
-      role="region"
-    {% if not _item.stay_open %}
-      data-bs-parent="#accordion-{{ _id }}"
+    {% if _expand_button is not empty %}
+      {% if _expand_button.attributes is empty %}
+        {% set _expand_button = _expand_button|merge({
+            attributes: create_attribute()
+          })
+        %}
+      {% endif %}
+      {% include '@oe-bcl/bcl-button/button.html.twig' with _expand_button|merge({
+        attributes: _expand_button.attributes
+                    .setAttribute('data-target', 'accordion-' ~ _id)
+                    .setAttribute('data-action', 'expand')
+      }) only %}
     {% endif %}
-    >
-      <div class="accordion-body">
-        {%- set _content = _item.content|default('') %}
-        {%- block content _content -%}
+    {% if _collapse_button is not empty %}
+      {% if _collapse_button.attributes is empty %}
+        {% set _collapse_button = _collapse_button|merge({
+            attributes: create_attribute()
+          })
+        %}
+      {% endif %}
+      {% include '@oe-bcl/bcl-button/button.html.twig' with _collapse_button|merge({
+        attributes: _collapse_button.attributes
+                    .setAttribute('data-target', 'accordion-' ~ _id)
+                    .setAttribute('data-action', 'collapse')
+      }) only %}
+    {% endif %}
+  </div>
+  {% endif %}
+  <div class="accordion-items-wrapper">
+    {% for _item in _items %}
+      {% set _open_item = _open_item_id == loop.index %}
+      {% set _button_classes = ['accordion-button'] %}
+      {% if not _open_item %}
+        {% set _button_classes = _button_classes|merge(['collapsed']) %}
+      {% endif %}
+      <div class="accordion-item">
+        {%- 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')
+                                    .setAttribute('autocomplete', 'off')
+                                    .setAttribute('data-bs-target', '#collapse-' ~ _id ~ '-' ~ loop.index)
+                                    .setAttribute('aria-controls', 'collapse-' ~ _id ~ '-' ~ loop.index)
+                                    .setAttribute('aria-expanded', open_item ? 'true' : 'false')
+          %}
+          {% include '@oe-bcl/bcl-button/button.html.twig' with {
+            label: _item.title,
+            clean_class: true,
+            attributes: button_attributes
+          } only %}
+        </{{ _item_title_tag }}>
+        <div
+          id="collapse-{{ _id }}-{{ loop.index }}"
+          class="accordion-collapse collapse{{ _open_item ? ' show' }}"
+          aria-labelledby="heading-{{ _id }}-{{ loop.index }}"
+          role="region"
+        {% if not _item.stay_open and _expand_button is empty  %}
+          data-bs-parent="#accordion-{{ _id }}"
+        {% endif %}
+        >
+          <div class="accordion-body">
+            {%- set _content = _item.content|default('') %}
+            {%- block content _content -%}
+          </div>
+        </div>
       </div>
-    </div>
+    {% endfor %}
   </div>
-{% endfor %}
 </div>
 {% endif %}
 

package/templates/bcl-inpage-navigation/inpage-navigation.html.twig

@@ -9,6 +9,7 @@ Parameters:
   - links: (link[]) (default: [])
   - id (string) (default: bcl-inpage-navigation-random(100))
   - dropdown_id (string) (default: bcl-inpage-navigation-dropdown-random(100))
+  - dynamic_active: (boolean) (default: false)
   - icon_path (string) (default: '')
   - attributes (drupal attrs)
 #}
@@ -21,6 +22,7 @@ Parameters:
 {% set _id = id|default('bcl-inpage-navigation-' ~ random(100)) %}
 {% set _icon_path = icon_path|default('') %}
 {% set _dropdown_id = dropdown_id|default('bcl-inpage-navigation-dropdown' ~ random(100)) %}
+{% set _dyanmic_active = dynamic_active|default(false) %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
@@ -37,7 +39,13 @@ Parameters:
   } only -%}
 {% endset %}
 
-<nav {{ attributes }}>
+{% set _classes = [] %}
+
+{% if _dyanmic_active %}
+  {% set _classes = _classes|merge(['dynamic-active']) %}
+{% endif %}
+
+<nav {{ attributes.addClass(_classes) }}>
   {% set trigger_attributes = create_attribute()
                               .setAttribute('aria-expanded', 'false')
                               .setAttribute('type', 'button')